Zooming and Moving Background Image on Scroll JavaScript Library

Question

I have noticed several website which have background images that zoom out, in, and move based on scroll. I am familiar with parallax scrolling, but this seems a little different as the background images does not actually change.

Some examples of what I mean (there is some parallax within these as well) are flatvsrealism and DiscoverLab. Flatvsrealism has it especially at the end when it turns to real life.

Since I'm sure this is way too complicated to do on your own, I was wondering if there are any JavaScript libraries that could work. I am familiar with ScrollMagic, but it doesn't seem it's capabilities extend so far as this.

Answer 1

To do this, you will want to make your parallax scrolling modify your background image's size in addition to it's position. To do this, set the background property of your parallax scrolling element, in Javascript:

[your parallax object].style.background= "color image repeat attachment position size";

Note: the color is a hex code or rgba(, the image is the url, the repeat is whether you want the background to repeat, the attachment is going to be "scroll", the position is going to be the position of your background image, and the size will be "xpx ypx"

This code will go where your scrolling is. It will replace the code that sets your background image's position; this will use the composite property of "background". You will need to set the size as a function of how far your visitors have scrolled down the page.

The exact code will depend upon your library and how you are implementing parallax scrolling.

If you are looking for parallax libraries, I would recommend writing your own parallax function in jQuery. This way you will be able to modify your function to change the background size. There is a comprehensive list of jQuery parallax tutorials here.