'Multilayer parallax background

I'm looking to do a parallax effect like this.

https://medium.com/@PatrykZabielski/how-to-make-multi-layered-parallax-illustration-with-css-javascript-2b56883c3f27

However, I don't quite understand all the fancy stuff/scripts used in this, like HAML and Coffeescript.

How can I do this with simplified JavaScript/jQuery and HTML, having the parallax be just the illustration on top of the page versus a whole page parallax?



Solution 1:[1]

This example is probably one of the clearest examples, and if you export the final codepen, the original html, css and javascript is there for you to learn from. Alternatively there is this one which explains the javascript side of things quite nicely. http://www.javascriptkit.com/dhtmltutors/parallaxscrolling/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mkrieger1