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.

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="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>

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

$(window).scroll(function(){

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

  $('#layer4').css({
    'transform': `translate(0px, -${ws / 1.2}px)`
  });

  $('#layer3').css({
    'transform': `translate(0px, -${ws / 2}px)`
  });

  $('#layer2').css({
    'transform': `translate(0px, -${ws / 3}px)`
  });

  $('#layer1').css({
    '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.