Multi-layer Parallax Effect In jQuery - Parajjax.js

Parajjax.js is a tiny, fast, configurable, multi-layer parallax jQuery plugin for parallaxing elements based on mouse movement and page scroll events.

Based on CSS3 3D transforms and window.requestAnimationFrame API.

How to use it:

1. Load the JavaScript parajjax.js and Stylesheet parajjax.css in the document.

<link rel="stylesheet" href="/path/to/parajjax.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/parajjax.js"></script>

2. Create a parallax container and add as many layers as follows:

• image: path to images
• srcset: for responsive images
• sensitivity: motion parallax sensitivity
• cursor_sensitivity: cursor parallax sensitivity
• classname: additional CSS classes
• alttext: image alternative text

<div style="height: 50vw;" data-parajjax='{
   "layers":[
      {
         "image":"https://source.unsplash.com/1080x728/?fitness",
         "sensitivity": 0.6,
         "cursor_sensitivity": 0,
         "classname": "",
         "srcset": "https://source.unsplash.com/1080x728/?fitness",
         "alttext": "Parallax Background"
      },
      {
         "image":"https://www.jqueryscript.net/images/logo.png",
         "sensitivity":"0.05",
         "cursor_sensitivity":"0.05",
         "classname":"parallax-layer-class",
         "srcset":"https://www.jqueryscript.net/images/logo.png",
         "alttext":"Parallax Layer 1"
      }
   ]
}'>
</div>

---

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