jQueryバックグラウンドポジションとCSSアニメーションポジションのバグと効率

Question

現在、ステージ/ヒーローには、背景イメージ（テキストイメージ）をループしたdivがあり、アニメーションを作成するためにjQueryを使用しているサイトで作業していますスクリーン上を移動する画像の「​​海」の外観を与えるためのそれらの配置。

var position = 0; 
 

 
setInterval(function() { 
 
    position -= 1; 
 
    $(".sub-image-1").css({ "background-position":+ position +"px 0px" }) 
 
}, 20); 
 

 
setInterval(function() { 
 
    position -= 1; 
 
    $(".sub-image-2").css({ "background-position":+ position +"px 0px" }) 
 
}, 140); 
 

 
setInterval(function() { 
 
    position -= 1; 
 
    $(".sub-image-3").css({ "background-position":+ position +"px 0px" }) 
 
}, 200);

.stage-image { 
 
    width:100vh; 
 
    height:30vh; 
 
} 
 

 
.stage-sub-image { 
 
    position:absolute; top:0; 
 
    width:100%; 
 
    height:100%; 
 
    background-repeat:repeat-x; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="stage-image"> 
 
    <div class="stage-sub-image sub-image-1" style="background:url(https://upload.wikimedia.org/wikipedia/commons/c/ca/Triple-Spiral-4turns_green_transparent.png)"></div> 
 
    <div class="stage-sub-image sub-image-2" style="background:url(https://upload.wikimedia.org/wikipedia/commons/b/be/Blender3D_Lisc_lipy-Transparent.png)"></div> 
 
    <div class="stage-sub-image sub-image-3" style="background:url(https://cdn0.iconfinder.com/data/icons/ball/256/transparent.png)"></div> 
 
</div>

以下のブラウザ集約的で、このソリューションへのより良い方法がある場合、私は興味があります。私はこの場合、setIntervalが必要以上にサイトに多くのオーバーヘッドを加えると感じています。このようなことに対処するためのよりよいアプローチはありますか？パフォーマンスの問題の上で、JSを介して行われたアニメーションは非常に不安定であり、私はよりスムーズな効果を望んでいます。ここで

は、私は現在、上記の持っているもののCodePenだ：これはに近いされている間

https://codepen.io/stufu/pen/GvJdxq

UPDATE

@FuriousDは、これを達成するためにCSSを使用して、以下の優れた提案を行いました私が望んでいたことは、CSSのアニメーションはバックグラウンドポジションの終わりに当たったときにジャンプを引き起こします。

ここで自分の答えではなく、アニメーションが完了した後、「ジャンプ」の新しい問題に基づいて、Codepenです：

codepen.io/stufu/pen/YxXaLR

Answer 1

あなたはCSSアニメーションを使用することができます。注、画像（-250px）の幅が、アニメーションにハードコーディングする必要がありますが、これは動的に生成することができます。

var containers = $('.stage-sub-image'); 
 
var containerWidth = $(containers[0]).width(); 
 
var styleElem = document.createElement('style'); 
 
var animClass = 'animateMe'; 
 

 
document.body.append(styleElem); 
 

 
styleElem.innerHTML = 
 
    '@keyframes animBg {' + 
 
    'from { background-position: 0px top; }' + 
 
    'to { background-position: -' + containerWidth + 'px top }' + 
 
    '}' + 
 
    '.' + animClass + ' { animation: animBg 10s linear infinite; background-size: 100% auto; }'; 
 

 

 
containers.addClass(animClass);

.stage-sub-image { 
 
    width: 200px; 
 
    height: 130px; 
 
    background-color: #909; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="stage-image"> 
 
    <div class="stage-sub-image" style="background-image:url(http://via.placeholder.com/250x130)"></div> 
 
    <div class="stage-sub-image" style="background-image:url(http://via.placeholder.com/250x130)"></div> 
 
    <div class="stage-sub-image" style="background-image:url(http://via.placeholder.com/250x130)"></div> 
 
</div>

Answer 2

私は私が正常にできたアップデートを投稿したいです@ FuriousDの答えから多くの助けを借りてこれを達成してください。最終的に彼の洞察はこれにつながりました。私は彼の答えを受け入れていますが、私が純粋なCSSを通して達成した作業バージョンを提供したかったのです。

基本的に、これには背景画像の寸法を知る必要があります。画像をCSSアニメーションにコーディングすることで、スムーズにスクロールすることができ、スケーラビリティが向上します。

CSS：コメント@FuriousDため

@keyframes animBg1 { 
    from { 
    background-position: 0px top; 
    } 
    to { 
    background-position: -613px top; 
    } 
} 

@keyframes animBg2 { 
    from { 
    background-position: 0px top; 
    } 
    to { 
    background-position: -327px top; 
    } 
} 
@keyframes animBg3 { 
    from { 
    background-position: 0px top; 
    } 
    to { 
    background-position: -256px top; 
    } 
} 

.stage-image { 
    .stage-sub-image { 
    position:absolute; top:0; 
    width:100vw; 
    height:100vh; 
    background-repeat:repeat-x; 
    animation-fill-mode: forwards; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
    } 
    .sub-image-1 { 
    animation-name: animBg1; 
    animation-duration: 5s; 
    } 
    .sub-image-2 { 
    animation-name: animBg2; 
    animation-duration: 2s; 
    } 
    .sub-image-3 { 
    animation-name: animBg3; 
    animation-duration: 3s; 
    } 
} 

HTML

<div class="stage-image"> 
    <div class="stage-sub-image sub-image-1" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/c/ca/Triple-Spiral-4turns_green_transparent.png)"></div> 
    <div class="stage-sub-image sub-image-2" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/1/16/Rainbow_trout_transparent.png)"></div> 
    <div class="stage-sub-image sub-image-3" style="background-image:url(https://cdn0.iconfinder.com/data/icons/ball/256/transparent.png)"></div> 
</div> 

Codepen example