Different elements on this page appear to scroll at different speeds. How was this done?

javascript jquery css scroll pagespeed
user852974 picture user852974 · Dec 5, 2011 · Viewed 12.2k times · Source

The effect i am refering to is visible at http://whyinteractive.com/showreel. The elements appear to scroll behind and in front of one another at different speeds creating some cool effects. How was this done?

Answer

Alec Smart picture Alec Smart · Dec 5, 2011

What you are looking for is called the Parallax effect.

You can learn more at sites like:

http://locomotivation.squeejee.com/post/109269802/jquery-parallax-scrolling-build-your-own-1980s-video-gam

http://stephenmcintyre.net/blog/jquery-parallax-scrolling/

UPDATE:

This is pretty much exactly what you need:

CODE: Build a parallax scrolling website interface with jQuery & CSS

DEMO: Parallax Scrolling

Related questions

Prevent BODY from scrolling when a modal is opened

I want my body to stop scrolling when using the mousewheel while the Modal (from http://twitter.github.com/bootstrap) on my website is opened. I've tried to call the piece of javascript below when the modal is opened but …

Read More
How can I make a div stick to the top of the screen once it's been scrolled to?

I would like to create a div, that is situated beneath a block of content but that once the page has been scrolled enough to contact its top boundary, becomes fixed in place and scrolls with the page.

Read More
Keep overflow div scrolled to bottom unless user scrolls up

I have a div that is only 300 pixels big and I want it to when the page loads scroll to the bottom of the content. This div has content dynamically added to it and needs to stay scrolled all the …

Read More