Enllax.js - Parallax scrolling effect

Enllax is an ultra-lightweight (~1kb) and super easy to use plugin for applying parallax scrolling effect to any scrolling element.

Source: mmkjony.github.io

1. INCLUDE JS FILES

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.enllax.min.js"></script>

2. JAVASCRIPT

//very simple activation
$(window).enllax();

//or
$('#some-id').enllax();  // This selector should be parent of parallax scrolling elements

3. PARALLAX ELEMENTS:

If you want your elements to scroll at a different speed, or you can say scroll with parallax effect, then this plugin made this super easy. All you have to do is to use data attributes on elements, where you want to add parallax scrolling effect.

Parallax scrolling effects can be in two types. One is background scrolling effect, and another is for forground elements to scroll with different speed.

Parallax on Backgrounds: 
To allow background image to move with different speed, just use a data attribute with a numeric value as a multiplier for scrolling speed. Less is slower, and 1 is normal. Here's an example:

<div data-enllax-ratio="0.5">...</div>

Parallax on Foreground Elements: 
To add a different scrolling speed to any forground element, you have to add another data attribute additionally. And, the value for this attribute should be 'foreground'. Default value is 'background'. Here's an example:

<img src="path/to/image" data-enllax-ratio=".5" data-enllax-type="forground" />

You can also use some default value for all parallax scrolling element

$(window).enllax({

//default values

// type can be defined as it is background parallax scrolling element or forground scrolling element.
type: 'background',  // another value for type is 'foreground'.

ratio: 0.5  // multiplier for scrolling speed. Less is slower.

});