jQuery scroll parallax plugin

Examples

Details

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.

Its important to note that in the Nike example which this plugin tries to recreate (and my own examples below), much of the effect is not in fact controlled by javascript. The slow movement of the background image is actually because without the JS it is completely stationary in the centre of the browser window, thanks to background-position:fixed. What the javascript does it to move the background image very slowly, like it isn't fixed at all.

<p>Download the plugin from github</p><h3>How to use it</h3><ol><li>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.</li><li>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.</li><li>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.</li><li>Include the jQuery (1.4.3+ required) and jQuery.scrollParallax.js javascript files in your HTML. You’ll also need the jquery.inview.js plugin.</li><li>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</li></ol><h3>Options</h3><p>The plugin has just 3 options:</p><table style="width: 100%;" border="0" cellpadding="5"><thead><tr><th>Option</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>speed</td><td>0.2</td><td>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.
</td></tr><tr><td>axis</td><td>‘x,y’</td><td>‘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.</td></tr><tr><td>debug</td><td>false</td><td>true/false. Whether to enable debugging to the console. Useful only if you care about the numbers, which you most probably don’t.</td></tr></tbody></table>