Comment ajouter un effet de parallaxe dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter un effet de parallaxe dans Webflow avec les interactions natives ou du CSS.

Exemple

1. Créez votre section avec l'image de fond

Créez une section dans Webflow. Attribuez une image de fond et réglez-la sur Cover. Attribuez à cette section la classe parallax-section. Assurez-vous que la section a une hauteur suffisante (min-height: 500px).

2. Ajoutez l'effet parallaxe avec Webflow Interactions

Sélectionnez l'image de fond ou un élément enfant. Dans Interactions, créez un trigger Scroll into view avec l'option While scrolling in view. Ajoutez une action Move sur l'axe Y, de +50px à -50px selon la progression du scroll. Cochez Easing: Linear.

3. Alternative : script JavaScript pour l'image de fond

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

Conclusion

L'effet parallaxe ajoute de la profondeur et du dynamisme. Cas d'usage :

• Section hero avec image de fond
• Sections séparatrices entre les blocs de contenu
• Pages portfolio avec visuels impactants