简体   繁体   English

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

[英]How to infinite horizontal scroll an image in jQuery?

Im trying to layer 2 images 1 on top of the other and make them scroll infinitely using jQuery. 我试图将2个图像1叠加在另一个图像之上,并使用jQuery使它们无限滚动。 I am able to make the images scroll and layer in CSS but the animation becomes very jerky. 我可以使图像在CSS中滚动和分层,但是动画变得非常生涩。 How could I create an infinite horizontal scroll on an image using jQuery and keep the animations smooth? 如何使用jQuery在图像上创建无限水平滚动并保持动画流畅?

My code so far: 到目前为止,我的代码:

CSS: 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;
}

and HTML: 和HTML:

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

JSFiddle JSFiddle

Check it out. 看看这个。 Maybe you will like it. 也许您会喜欢。

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

Basically just used translate instead of background-position. 基本上只使用了translate而不是background-position。

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

Just adjust the speed as you wish. 只需根据需要调整速度即可。

Change your 改变你的

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

to: 至:

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

The snippet: 片段:

 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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM