jParallax

jParallax turns a selected element into a 'window', or viewport, and all its children into absolutely positioned layers that can be seen through the viewport.

These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

If the layers are made of <div>s or <li>s or any other container then content can be positioned inside those layers, and Parallax provides methods for navigating to that content in response to user events.

The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the parallax 'window'. When the mouse is moved to the extreme left-hand side of the parallaxed window the left-hand side of the layer meets it, and when the mouse is moved to the extreme right-hand side of the parallaxed window the right-hand side of the layer arrives at the right hand-side of the window.

jParallax can be used in its simpler way to make the layers animate at different sizes and speed using CSS.

Bigger layers move faster and thus appear closer, and unless a layer is smaller than the viewport, its edges are never seen.

With jParallax in its default state, and the 'speed' of the layers controlled simply by making the images different sizes.

What is new in this release:

• Added license.

What is new in version 1.0:

• Namespace changed to .parallax()
• Freeze and re-position
• Set up viewports using CSS
• Set up mouseports using CSS
• xtravel and ytravel options removed

What is new in version 0.9.1 BETA:

• Fixed bug when specifying travel by %.
• Travel px or % detection has more robust Regex.
• Code optimization.

Requirements:

• Javascript enabled on client side
• jQuery 1.2.6 or higher