jQuery scroll parallax plugin
Parallax, for those not in the know, "is an apparent displacement or difference in the apparent position of an object viewed along two different lines of sight" (wikipedia). You'll perhaps know it better as "that sideways pan effect animators use where the distance moves slowly but layers of scenary nearer the 'camera' move quicker".
It's become a popular effect on websites, notably http://silverbackapp.com/ (try resizing your browser horizontally) which pushed the effect to the fore due to the notoriety of the agency behind it (ClearLeft). Silverback was released several years ago but more recently Nike created http://nikebetterworld.com which also uses the effect rather nicely.
I've had cause to use it at work, so I wrote a jQuery plugin to make it easier.
How to use it
- Create several elements in your HTML page which you want to apply the parallax effect to. Set the background-image of each element. The scrollParallax plugin currently only works on background images. In the example index.html in github I've created a unordered list in which each list item is one of the parallax elements. Each background image needs to be quite large - the full width/height of browser for example - for the effect to work best.
- Parallax looks nicest when there are several items all moving at different speeds. I'd recommend you therefore add some children within the elements you created in step 1, each with their own background images which we'll set to move at a different speed.
- Apply the example styles.css to the elements you've created. The important attributes are the position, overflow and background-position ones (although you'll note I've applied the background-position:fixed by using the background shortcut). The 100% width and height are also vital for the child elements. With the styles in place you'll already be able to see the masking effect working as you scroll through.
- Apply the scrollParallax function to each element you want to move, using the standard jQuery selector method, illustrated in the scripts.js file on github
The plugin has just 3 options:
|speed||0.2||Any positive or negative value. This is the speed with which the background will move. Positive values move the background image with the direction of scrolling. Negative moves the image against the scroll. Negative values look the best.|
|axis||'x,y'||'x'/'y'/'x,y'. Which axis are parallax-enabled. By default both axes are enabled, but for whatever reasons you may wish to lock it to one.|
|debug||false||true/false. Whether to enable debugging to the console. Useful only if you care about the numbers, which you most probably don't.|