Lightweight Interactive Parallax Effect - SimpleParallax.js

File Size: 8.65 KB
Views Total: 2318
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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" 
  <div class="parallax__item" data-parallax-depth="10">
     Parallax Item 1
  <div class="parallax__item" data-parallax-depth="3">
     Parallax Item 2
  <div class="parallax__item" data-parallax-depth="5">
    Parallax Item 3

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.