Multi-layer Image Parallax Scrolling Effect With jQuery

Multi-layer Image Parallax Scrolling Effect With jQuery
File Size: 38.8 KB
Views Total: 4431
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

A dead simple jQuery solution that applies a subtle parallax scrolling effect to multi-layered images using CSS3 2D transforms.

How to use it:

1. Add parallax images to the webpage.

<img src="layer0.png" id="layer0" alt="">
<img src="layer1.png" id="layer1" alt="">
<img src="layer2.png" id="layer2" alt="">
<img src="layer3.png" id="layer3" alt="">
<img src="layer4.png" id="layer4" alt="">

2. Load the latest version of jQuery JavaScript library in the webpage.

<script src="" 

3. Activate the parallax scrolling effect on the images using CSS3 transform > translate property.


  var ws = $(window).scrollTop();

    'transform': `translate(0px, -${ws / 1.2}px)`

    'transform': `translate(0px, -${ws / 2}px)`

    'transform': `translate(0px, -${ws / 3}px)`

    'transform': `translate(0px, -${ws / 4}px)`


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