Lightweight Interactive Parallax Effect - SimpleParallax.js

SimpleParallax.js is a lightweight jQuery plugin that applies smooth, fast, interactive, requestAnimationFrame powered Parallax effects to absolute positioned elements when mouse moving.

How to use it:

1. Load the latest version of jQuery library and the SimpleParallax.js script in your html document.

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="js/simpleParallax.min.js"></script>

2. Add your parallax items a container and config the parallax effects for each item using the following data attributes:

<div class="parallax" 
     data-parallax-axis="both" 
     data-parallax-scope="global" 
     data-parallax-detect="mouseover">
  <div class="parallax__item" data-parallax-depth="10">
     Parallax Item 1
  </div>
  <div class="parallax__item" data-parallax-depth="3">
     Parallax Item 2
  </div>
  <div class="parallax__item" data-parallax-depth="5">
    Parallax Item 3
  </div>
</div>

3. Make the parallax items absolute positioned in the CSS.

.parallax {
  position: relative;
  width: 100%;
  height: 100%
}

.parallax__item {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0
}

4. That's it. All available data attributes to config the parallax effects.

• data-parallax-scope: the scope/region covered by the parallax effect
• data-parallax-axis: the direction affected by the parallax effect
• data-parallax-detect: the event that triggers the effect
• data-parallax-max-shift: maximum shift in both directions of the elements
• parallax-depth: the depth of an item
• parallax-offset-x: the offset of an item in pixels along the x axis
• parallax-offset-y: the offset of an item in pixels along the y axis

---

This awesome jQuery plugin is developed by alexprut. For more Advanced Usages, please check the demo page or visit the official website.