Adrian Raath

Web Strategist & Webflow Developer
Follow me on:
Twitter
YouTube
Instagram
Code Snippets
Header Parallax Effect on Scroll

Header Parallax Effect on Scroll

with
Javascript
in
See it in actionThe codeSetting it up
True, Javascript based header parallax scroll animation with a few lines of code.

See it in action

While Webflow offers fixed backgrounds, it does not actually allow you to manipulate background position on scroll. Scroll through the window below and see how the background element scrolls slightly slower than the rest of the content, creating a true dynamic parallax effect!

The code

Copy the code below to the before </body> tag of the page where you want a parallax effect on the header/hero.

‍


<script>

const parallax = document.getElementById("parallax");

window.addEventListener("scroll", function() { 
let offset = window.pageYOffset;  
parallax.style.backgroundPositionY = offset * 0.6 + "px";})

</script>

Setting it up

  1. Give your hero/header section an ID and make sure it links up with the ID given to the "parallax" constant in the code above. To keep it simple I just gave it an ID of "parallax".
  2. Give the hero/header section a background. This will be the graphic that receives the parallax effect on scroll.
  3. Paste the code above to the before </body> tag of your page settings, publish and you are good to go!
  4. You can adjust the intensity of the effect by manipulating the offset multiplier in the code above (currently set to 0.6). Making this decimal smaller will slow the scroll on the background even more. Making it bigger will reduce the gap between the document scroll position and the scroll position of the background.
Contact me for inquiries