パララックス

Parallax-Scroll is a jQuery plugin to create elements with background images that behaves as if their background-attachment property is between scroll and fixed, similar to the parallax scrolling effect you see on Spotify and is loosely based on Peder Andreas Nielsen’s Parallax ImageScroll.

It makes clever use of background-position and background-size properties instead of CSS3 tranforms. It runs buttery smooth and retains the rubber-band scroll behavior in Safari. Works great on mobile too.

The basic markup consists of content sections placed between background holders. The width and height of the original images must be supplied via data attributes. They are required for the calculation of aspect ratios.

Add background images to the .bg-holder elements with the following styles.

The nicest thing about using CSS background images is that by adding media queries we can do responsive image sizes.

To initialize the plugin, call the parallaxScroll method on your background elements.

The plugin accepts one option – friction. It should be a float value that is more than 0 and less than 1. 0 causes the background to behave as it has background-attachment: scroll (which is useless). 1 (maximum friction) is the same as background-attachment: fixed. A value greater than 1 will cause the background to scroll in reverse!

Other features available in Pederan’s plugin such as holderMinHeight and coverRatio can be achieved purely with CSS and should be. The fallback option to turn off parallax in mobile devices is unnecessary because this plugin works smoothly on mobile devices.

Notes

Most likely requires a jQuery of lower version than other plugins you use. If in doubt I recommend 1.8.0 or higher.

The only limitation is that the background-size property is not supported by IE<9 so this plugin would not work on that ancient browser.

This plugin is loosely based on Peder Andreas Nielsen’s Parallax ImageScroll. Beautiful tilt-shift photos by rolohauck.