Question

我试图将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>

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	{
  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	{
  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>

如何在jQuery中无限水平滚动图像？

2 个答案: