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

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.