我正在尝试将第 2 个图像 1 叠加在另一个图像之上,并使用 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>
最佳答案
检查一下。也许你会喜欢它。
https://jsfiddle.net/hnxnjzaq/3/
基本上只是使用翻译而不是背景位置。
@keyframes animatedBackground {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
根据需要调整速度即可。
关于javascript - 如何在 jQuery 中无限水平滚动图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39806937/