Multi Layer Smooth Parallax Animation Plugin – jparallax

Jparallax is a parallax animation plugin library that creates a smooth animation effect within multiple positioned layers according to your needs. Depending on their dimensions each of the layers move at different rates and axis. You can set the movement of the parallax axis to horizontally or vertically as you need. There are various options to customize the parallax effect, position or axis.

Features:

• Multilayered supported.
• Creates smooth parallax animation.
• Supported on all modern browsers.
• Can modify the layer position with the help of CSS.

How to use it:

1. Include the Javascript jquery.event.frame.js and jquery.parallax.min.js at the bottom of the web page.

<script src="path/to/jquery.event.frame.js"></script>

<script src="path/to/jquery.parallax.min.js"></script>

2. Include the CSS jquery.parallax.css in the header of the page.

<link rel="stylesheet" href="path/to/jquery.parallax.css">

3. Add the basic HTML to the page.

<div class="parallax-viewport" id="parallax">
  <div class="parallax-layer">
    <img src="path/to/img-1" alt=""/>
  </div>
  <div class="parallax-layer">
    <img src="path/to/img-2" alt=""/>
  </div>
</div>

4. Add some custom CSS to position the parallax layer, for reference you can visit the demo page.

5. Initialize the plugin and we’re ready to go.

jQuery(window).load(function() {
  jQuery('#parallax .parallax-layer')
  .parallax({
    mouseport: jQuery('#parallax')
  });
});

Plugin’s default options: