jQuery Plugin For Smooth Parallax Effects On Scroll - enllax.js

File Size: | 8.1 KB |
---|---|
Views Total: | |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
enllax.js is a really small (~1kb minified) jQuery plugin that makes it easier to implement the familiar Parallax Effect on background or foreground elements as you scroll down the web page.
Basic usage:
1. Load the jQuery enllax.js script after you have jQuery library loaded in the document.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="jquery.enllax.min.js"></script>
2. Use the data-enllax-ratio
attribute to specify the different scrolling speeds for your background elements.
<div class="bg-1" data-enllax-ratio=".5"></div> <div class="bg-2" data-enllax-ratio=".7"></div> <div class="bg-3" data-enllax-ratio=".3"></div>
3. Add the required data-enllax-type="forground"
attribute to your foreground elements
<div class="fg-1" data-enllax-ratio=".5" data-enllax-type="forground"></div> <div class="fg-2" data-enllax-ratio=".7" data-enllax-type="forground"></div> <div class="fg-3" data-enllax-ratio=".3" data-enllax-type="forground"></div>
4. Initialize the plugin to enable the parallax scrolling effects.
$(window).enllax();
5. You can also pass the parameters via option objects during initialization.
$('#SELECTOR').enllax({ ratio: 0.5, type: 'background' //foreground });
This awesome jQuery plugin is developed by mmkjony. For more Advanced Usages, please check the demo page or visit the official website.