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:
.parallax-viewport {
position:relative; overflow:hidden; width:npx; height:npx;
}Download: https://github.com/stephband/jparallax
Demonstration: https://stephen.band/jparallax/
Plugin homepage: https://stephen.band/jparallax/
Implementation:
1. First, include CSS & jQuery files
<!-- 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
<ul>
<li class="parallax-layer"></li>
<li class="parallax-layer"></li>
</ul>3. jParallax plugin call
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 I 0-1 | ‘n%’ I ‘npx’ |
| yparallax | Boolean | Default : true – Set to true or false to enable or disable movement. boolean I 0-1 I ‘n%’ I ‘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 I ‘n%’ I ‘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 I ‘n%’ I ‘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:
