Milan Lund logo

Hi, I am Milan Lund!Full Stack Web Developer

I specialise in building websites and web applications with and Kentico platforms.

  • Front-end

Simple scroll parallax

Recently, a designer asked me to add a parallax background image on a website. I researched the web to find a suitable solution. Regrettably, I found only massive libraries that would do the thing but bring in a lot of unnecessary javascript code. That is no go for me. I wanted a lightweight and straightforward solution. It took me a while, but I came up with the following code that works perfectly for my needs and hopefully will serve you well too. Check Codepen for a working example.

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 data-parallax-target attribute stands for the parallax image. It is positioned absolutely to the parent element and moves as a user scrolls thanks to javascript code (explained below). The key here is that the data-parallax-target element has the bottom property set to be higher than its parent element.
  • DIV with the content class name is positioned relatively and contains everything that we want to render on top of the parallax image.
Loading... Loading...

And of course a bit of javascript code

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.


Check Codepen for a working example