0

Im trying to layer 2 images 1 on top of the other and make them scroll infinitely using jQuery. I am able to make the images scroll and layer in CSS but the animation becomes very jerky. How could I create an infinite horizontal scroll on an image using jQuery and keep the animations smooth?

My code so far:

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:

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

JSFiddle

kevinabraham
  • 1,250
  • 3
  • 19
  • 49

2 Answers2

3

Check it out. Maybe you will like it.

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

Basically just used translate instead of background-position.

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

Just adjust the speed as you wish.

kind user
  • 32,209
  • 6
  • 49
  • 63
1

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>
gaetanoM
  • 39,803
  • 6
  • 34
  • 52
  • That's not the problem, gaetanoM. The problem is with using `%`. This `%` doesn't refer to the background-size, but to element size. So it's only going to work when the element has the same width as the background. This is a tricky problem to solve. Within a certain w/h range of ratios, `background-size:cover` works, if you know how to cut your background. – tao Oct 01 '16 at 13:54
  • @AndreiGheorghiu Thank you so much for the info. It's very precious. Thanks again – gaetanoM Oct 01 '16 at 13:56