CODEWITHSUNDEEP
javascripthtmlanimationscrollmotion
thran
thran

Reputation: 129

How do I make an image endlessly repeat scroll in Javascript?

I'm making a webpage just for a bit of amusement. I want the background image to endlessly scroll to the left when the page is first loaded. The image is set to repeat-x in CSS and is seamless when laid end-to-end. Is this code I wrote aiming in the right direction?

I'm hoping to keep the JS vanilla just for simplicity but if this is better handled by JQuery, CSS or another library I'll be all ears.

I'll be very grateful for the help!

I've already tried some vanilla JavaScript code in a simple HTML document. My efforts so far haven't made the image move at all.

document.addEventListener("DOMContentLoaded", function() {
  var y = 0;
  while (true) {
    y -= 1;
    document.getElementById("bgImg").left = y;
  }
})
#bgImg {
  background-image: url("img1.jpg");
  background-repeat: repeat-x;
  width: 100%;
  height: 660px;
  display: inline;
}
<div id="bgImg">
</div>

This simply freezes my browser and doesn't scroll at all. Likely thanks to the "while(true)".

Upvotes: 0

Views: 2431

Answers (3)

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23379

I just implemented this on my own site after seeing your question. cool idea!

function animateBg(px=0){
    requestAnimationFrame(()=>{
        document.body.style.backgroundPosition = `${px}px 0px`;
        animateBg(px+0.5);
    });
}
animateBg();

It assumes you have a bg image set in CSS. Change the 0.5 to change the speed.

Upvotes: 1

IronFlare
IronFlare

Reputation: 2322

This is best accomplished with a CSS animation instead of JavaScript. CSS keyframed animations are designed to loop smooth transitions between pre-set property states with minimal memory overhead (and no synchronous while loops :P).

The only added bit of information you need to include is the width of your image. If you use this value as the x-coordinate of background-position in the to state of the animation, as soon as the background travels that many pixels, it will jump back to the from position. This jump will be invisible to the viewer, provided you've set the width correctly.

#bg {
  background: url('https://www.gravatar.com/avatar/e47523b278f15afd925a473e2ac0b966?s=120&d=identicon&r=PG&f=1');
  background-repeat: repeat-x;
  width: 240px;
  height: 120px;
  animation: bgScrollLeft 5s linear infinite;
}

@keyframes bgScrollLeft {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -120px 0;
  }
}
<div id="bg"></div>

Upvotes: 2

Niels
Niels

Reputation: 49919

You are moving the element left, but in fact you should move your background position. Next to that with a while(1) loop it will run infinitly. So 2 task, create an animation frame to not run infinite. And change the background-position property.

var left = 0;
// You might want to add a time delta
function animate() {
    requestAnimationFrame( animate );
    document.getElementById("bgImg").style.backgroundPosition = '0 ' +left-- + 'px';
}
animate();

Note the code probably wont work, but gives you an idea of an solution.

Look into requestAnimationFrame to know what it does.

edit
Look at IronFlare solution, which is more beautiful with css.

Upvotes: 0

Related Questions