Press "Enter" to skip to content

Simple jQuery Scroll & Mouse Parallax | Parajjax

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


See Demo And Download

Official Website(brycegough): Click Here

This superior jQuery/javascript plugin is developed by brycegough. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.