#Enllax.js
An ultra-lightweight (~1kb) and super easy to use plugin for applying parallax scrolling effect to any scrolling element.
1. At first include jQuery and jquery.enllax.js
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.enllax.min.js"></script>
2. Activate the Plugin
//very simple activation
$(window).enllax();
//or
$('#some-id').enllax(); // This selector should be parent of parallax scrolling 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.
1. 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>
2. 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" />
$(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.
});
This plugin is maintaining by MMK Jony, and is licensed under MIT