Simple scroll parallax
The first thing we need is HTML and CSS
- DIV with the data-parallax attribute is a container that holds the parallax image and content
- DIV with the content class name is positioned relatively and contains everything that we want to render on top of the parallax image.
On the scroll event, the code checks whether the data-parallax element is in the viewport. If positive, the translate position gets computed for the data-parallax-target so that the image moves. For better performance, you can use a passive event listener for the scroll event.Loading...