Multi-layer Image Parallax Scrolling Effect With jQuery

Multi-layer Image Parallax Scrolling Effect With jQuery

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

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.

  • Publication date: 31.05.2018
  • Source