jQuery Plugin For Smooth Parallax Effects On Scroll - enllax.js
File Size: | 9.24 KB |
---|---|
Views Total: | 6734 |
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.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. Specify the direction:
<div class="fg-1" data-enllax-ratio=".5" data-enllax-direction="horizontal"></div> <div class="fg-2" data-enllax-ratio=".7" data-enllax-direction="vertical"></div>
5. Initialize the plugin to enable the parallax scrolling effects.
$(window).enllax();
6. You can also pass the parameters via option objects during initialization.
$('#SELECTOR').enllax({ ratio: 0.5, type: 'background' //foreground });
Changelog:
2019-10-01
- Supports both horizontal and vertical scrolling
This awesome jQuery plugin is developed by mmkjony. For more Advanced Usages, please check the demo page or visit the official website.