Parallax scrolling in jQuery

Technology

Wynn Netherland wrote a plugin for jQuery that makes it easy to add a slick Parallax effect to a web site. For anyone who missed video games of the 80s, this is the old sidescroller technique that simulates depth by making things in the foreground move faster than the background. The jQuery Parallax plugin does this by easing the background position across several div layers, all at different rates.

To make it work, you just make a horizontally tile-able background image, and a horizontally tile-able alpha-transparent PNG for each foreground layer. These are each set as the background image of a separate div with the repeat-x attribute. The divs are absolutely positioned right on top of each other, and then a single line of jQuery code is used to set the animation speed for each layer.

It’s a subtle and bandwidth friendly way to add a bit of visual polish to your site. Netherland is using this effect for his blog’s masthead, and it looks pretty cool.

jQuery Parallax Scrolling (download)
jQuery
jQuery Easing library – you’ll need this too

What will the next generation of Make: look like? We’re inviting you to shape the future by investing in Make:. By becoming an investor, you help decide what’s next. The future of Make: is in your hands. Learn More.

Tagged
Discuss this article with the rest of the community on our Discord server!

ADVERTISEMENT

Escape to an island of imagination + innovation as Maker Faire Bay Area returns for its 16th iteration!

Prices Increase in....

Days
Hours
Minutes
Seconds
FEEDBACK