How to change scrolling speed of elements (parallax)

Question

I have recently felt the need for some parallax scrolling on my website, so I have tried stellar.js, which did not work right. So, I came here to ask, how do I make different elements have a different scrolling speed? I want the div element to be slower than the body element. How can I do this?

Answer 1

You can add different steps (speed of scrolling) to each element. Like below

bodyElement.speed= 5;
divElement.speed= 3;

You can try this fiddle. https://jsfiddle.net/krishnakumarm777/44wvewjm/ . Here I have used three canvases with images having different scroll speeds.