This time I will share jQuery Plugin and tutorial about Multi-layer Image Parallax Scrolling Effect With jQuery, hope it will help you in programming stack.
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.
1 |
<img src="layer0.png" id="layer0" alt=""> |
2 |
<img src="layer1.png" id="layer1" alt=""> |
3 |
<img src="layer2.png" id="layer2" alt=""> |
4 |
<img src="layer3.png" id="layer3" alt=""> |
5 |
<img src="layer4.png" id="layer4" alt=""> |
2. Load the latest version of jQuery JavaScript library in the webpage.
2 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin="anonymous"> |
3. Activate the parallax scrolling effect on the images using CSS3 transform > translate property.
01 |
$(window).scroll(function(){ |
03 |
var ws = $(window).scrollTop(); |
06 |
'transform': translate(0px, -${ws / 1.2}px) |
10 |
'transform': translate(0px, -${ws / 2}px) |
14 |
'transform': translate(0px, -${ws / 3}px) |
18 |
'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.
