How to Add a Parallax Effect in Webflow

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to add a parallax effect in Webflow using native interactions or CSS.

Example

1. Create your section with the background image

Create a section in Webflow. Add a background image and set it to Cover. Give this section the parallax-section class. Make sure the section has enough height (min-height: 500px).

2. Add the parallax effect with Webflow Interactions

Select the background image or a child element. In Interactions, create a Scroll into view trigger with the While scrolling in view option. Add a Move action on the Y axis, from +50px to -50px depending on scroll progress. Check Easing: Linear.

3. Alternative: JavaScript script for the background image

window.addEventListener('scroll', function() {
  document.querySelectorAll('.parallax-section').forEach(function(el) {
    const offset = el.getBoundingClientRect().top;
    el.style.backgroundPositionY = (offset * 0.3) + 'px';
  });
});

Conclusion

Parallax adds depth and motion. Use cases:

• Hero section with a background image
• Divider sections between content blocks
• Portfolio pages with eye-catching visuals