The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

jParallax : jQuery plugin for creating interactive parallax effect

Plugin rate :

What does jquery.parallax do?

jParallax turns nodes into absolutely positioned layers that move in response to the mouse. Depending on their dimensions these layers move at different rates, in a parallaxy kind of way.

With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about.

Using jParallax

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 mouseport. When the mouse is moved to the extreme left-hand side of the mouseport the left-hand side of the layer meets the left-hand side of its viewport, and when the mouse is moved to the extreme right-hand side of the mouseport the right-hand side of the layer arrives at the right hand-side of its viewport.

Therefore, the simplest way to use jParallax is to make the layers different sizes using CSS. Bigger layers move faster (and thus appear closer), and unless a layer is smaller than the viewport, its edges are never seen. The Colour Drops Demo is made in exactly this way, with jParallax in its default state, and the 'speed' of the layers controlled simply by making the images different sizes. Only the mouseport option is defined, to make it the same as the viewport.

jParallax CSS

To know all about CSS implementation, please go to jParallax homepage

There are various ways to style jParallax effectively. The classic approach is the 'viewport' effect, as in this example. To see layers through a viewport, wrap them in a container with a style similar to:

1
2
3
.parallax-viewport {
  position:relative; overflow:hidden; width:npx; height:npx;
 }

Implementation: 

1. First, include CSS & jQuery files

1
2
3
4
5
6
<!-- CSS -->
<link rel="stylesheet" href="jquery.parallax.css" />
 
<!-- jQuery files -->
<script src="jquery.min.js"></script>
<script src="jquery.parallax.min.js"></script>

2. HTML code

1
2
3
4
<ul>
  <li class="parallax-layer"></li>
  <li class="parallax-layer"></li>
</ul>

3. jParallax plugin call

1
2
3
4
5
6
7
jQuery(document).ready(function(){
  // Declare parallax on layers
  jQuery('.parallax-layer').parallax({
  mouseport: jQuery("#port")
  });
});
</script>               
Options: 
mouseport
Object
Default : jQuery(document) - Identifies DOM node to track the mouse in.
xparallax
Boolean
Default : true - Set to true or false to enable or disable movement. boolean | 0-1 | 'n%' | 'npx'
yparallax
Boolean
Default : true - Set to true or false to enable or disable movement. boolean | 0-1 | 'n%' | 'npx'
xorigin
Integer
Default : 0.5 - Only meaningful when xparallax or yparallax are not 1. Determines which point of the layer lines up with which point of the viewport when the mouse is at that point in the mouseport. 0-1 | 'n%' | 'left', 'center', 'middle', 'right'
yorigin
Integer
Default : 0.5 - Only meaningful when xparallax or yparallax are not 1. Determines which point of the layer lines up with which point of the viewport when the mouse is at that point in the mouseport. 0-1 | 'n%' | 'left', 'center', 'middle', 'right'
freezeClass
String
Default : "Freeze" - Class set on a layer when it is frozen.
decay
Integer
Default : 0.66 - Sets the rate at which the layers 'catch up' with the mouse position. 0 is instantly, 1 is forever.
frameDuration
Integer
Default : 30 - (milliseconds) Length of time between animation frames.
width
Integer
Default : undefined - (pixels) Values for layer dimensions, normally read from css, can be overridden. This does NOT change the size of the layer, only jParallax's idea of how big it is.
height
Integer
Default : undefined - (pixels) Values for layer dimensions, normally read from css, can be overridden. This does NOT change the size of the layer, only jParallax's idea of how big it is.
Methods: 
trigger
Function
Events can be triggered on layers using jQuery's trigger method : jQuery('.parallax-layer') .trigger('freeze or 'unfreeze'');
Screenshots
  • jParallax concept

  • jParallax exemple screenshot

Comments

This is amazing..

Great in-depth explanation of the plugin, thank you for this resource

Cant make freeze to work :( I am typing

jQuery(".parallax-layer").trigger("freeze");

But the layer still moves

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.4
Current version
1.1
Browsers compatibility
Google ChromeIE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [3]