Simple jQuery Scroll & Mouse Parallax

Parajjax JS is a simple jQuery Scroll & Mouse Parallax plugin for parallax elements based on mouse movement and page scroll events.

parallax effect js, parallax js demo, parallax js example, parallax scrolling effect js

How to make use of it:

1. Load the JavaScript parajjax.js and Stylesheet parajjax.css within the doc.

<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:

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

Multi-layer Parallax Effect, Parajjax Plugin/Github