Code for Changing Background Image On Scroll Several Times to Create Animation

Question

I was looking at this site and noticed how the background image seems to move and animate as the user scrolls. Upon inspection of the source code, it showed that this was achieved by changing the background image as the user scrolls. Essentially, it jumps through many frames of images giving the illusion of an animation.

What would be the quickest and easiest way to achieve this? I am using the ScrollMagic library if that would make it easier.

Answer 1

The quickest, easiest way is to listen for scroll events on the element, then change the background url via CSS to the file you want to show. You'll probably need to convert the pure scroll value to a percentage (to account for varying screen sizes), and you'll need an array of images that map to those percentages.