Multi-layer Parallax Effect In jQuery - Parajjax.js

File Size: 3.79 KB
Views Total: 696
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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='{
         "sensitivity": 0.6,
         "cursor_sensitivity": 0,
         "classname": "",
         "srcset": "",
         "alttext": "Parallax Background"
         "alttext":"Parallax Layer 1"

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