jQueryでイメージを無限に水平にスクロールする方法は？

Question

2枚の画像を重ね合わせて、jQueryを使って無限にスクロールさせようとしています。 CSSで画像をスクロールしてレイヤーを作成することはできますが、アニメーションは非常にぎこちなくなります。 jQueryを使用してイメージ上に無限の水平スクロールを作成し、アニメーションを滑らかに保つにはどうすればよいですか？これまで

マイコード：

CSS：

@keyframes animatedBackground { 
    from { background-position: 0 0; } 
    to { background-position: 100% 0; } 
} 

#animate-area { 
    width: 100vw; 
    height: 100vw; 
    background-image: url(http://oi64.tinypic.com/2r7ri29.jpg); 
    background-position: 0px 0px; 
    background-repeat: repeat-x; 

    animation: animatedBackground 135s linear infinite; 
} 

#animate-area2 { 
    width: 100vw; 
    height: 100vw; 
    background-image: url(http://oi67.tinypic.com/2niy905.jpg); 

    background-repeat: repeat-x; 
    position: relative; 
    animation: animatedBackground 80s linear infinite; 
} 

とHTML：

<div id="animate-area"></div> 
<div id="animate-area2"></div> 

JSFiddle

Answer 1

がそれをチェックアウト。多分あなたはそれを好きになるでしょう。

https://jsfiddle.net/hnxnjzaq/3/

は基本的にだけではなく、背景の位置の変換に使用します。

@keyframes animatedBackground { 
from { transform: translateX(0); } 
to { transform: translateX(100%); } 
} 

速度を調整するだけです。

Answer 2

にご

@keyframes animatedBackground { 
    from { background-position: 0 0; } 
    to { background-position: 100% 0; } 
} 

を変更

：

@keyframes animatedBackground { 
    from { background-position: -100% 0; } 
    to { background-position: 100% 0; } 
} 

スニペット：

body { 
 
    background-color: black; 
 
} 
 

 
@keyframes animatedBackground { 
 
    from { background-position: -100% 0; } 
 
    to { background-position: 100% 0; } 
 
} 
 

 
#animate-area \t { 
 
    width: 100vw; 
 
    height: 100vw; 
 
    background-image: url(http://oi64.tinypic.com/2r7ri29.jpg); 
 
    background-position: 0px 0px; 
 
    background-repeat: repeat-x; 
 
    position:absolute;z-index:-2; 
 

 
    animation: animatedBackground 135s linear infinite; 
 
} 
 

 
#animate-area2 \t { 
 
    width: 100vw; 
 
    height: 100vw; 
 
    background-image: url(http://oi67.tinypic.com/2niy905.jpg); 
 
    position:absolute;z-index:-1; 
 

 
    background-repeat: repeat-x; 
 
    position: relative; 
 
    animation: animatedBackground 80s linear infinite; 
 
}

<div id="animate-area"></div> 
 
<div id="animate-area2"></div>