Effet de parallaxe sur une image

L’effet parallaxe donne de la profondeur à un site web en faisant bouger une image plus lentement que son conteneur lors du défilement. Voici comment l’intégrer facilement dans Elementor grâce à GSAP + ScrollTrigger.

Ajouter le code GSAP dans Elementor

👉 Dans Elementor :

Allez dans votre tableau de bord WordPress.
Accédez à Elementor > Code personnalisé.
Cliquez sur Ajouter un nouveau code.
Nommez-le par exemple : Effet de parallaxe sur une image.
Collez le code suivant en choisissant l’emplacement </body> – Fin :

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<script>
gsap.utils.toArray(".section-parallax .parallax-content").forEach((section, i) => {
  const heightDiff = section.offsetHeight - section.parentElement.offsetHeight;
  
  gsap.fromTo(section,{ 
    y: -heightDiff
  }, {
    scrollTrigger: {
      trigger: section,
      scrub: true
    },
    y: 0,
    ease: "none"
  });
});
</script>

Créer la structure dans Elementor

Étape 1 : Le container parent

Ajoute un container Elementor.
Donne-lui la classe CSS : section-parallax
Régle la hauteur du container à environ 80vh (plus petit que l’image pour voir l’effet).

Étape 2 : L’image

Ajoute un widget Image dans ce container.
Donne-lui la classe CSS : parallax-content
Dans les réglages avancés de l’image :
- Position : Absolue
- Taille : couvre totalement le container (largeur 100%, hauteur auto ou fixée).
- Hauteur : dans la démo → environ 200vh (plus grande que le container pour bien voir le décalage).

Résultat attendu

Lorsque tu scrolls, l’image se déplace plus lentement que le reste du contenu → créant un effet de profondeur élégant et moderne.

Personnaliser le code

Regardons la partie clé :

gsap.fromTo(section,{ 
    y: -heightDiff
  }, {
    scrollTrigger: {
      trigger: section,
      scrub: true
    },
    y: 0,
    ease: "none"
});

Explications :

y: -heightDiff → L’image démarre décalée vers le haut de la différence entre sa taille et celle du container.
y: 0 → L’image remonte à sa position normale pendant le scroll.
scrub: true → Synchronise l’animation avec la progression du scroll.
ease: « none » → Pas d’accélération, l’effet reste linéaire.

Personnalisation possible :

Changer la vitesse de défilement
- Remplace scrub: true par scrub: 1 ou scrub: 2 → ajoute un effet d’inertie (plus doux).
Limiter la zone de déclenchement scrollTrigger: { trigger: section, start: "top 80%", // commence quand le container arrive à 80% du viewport end: "bottom 20%", // termine quand le bas atteint 20% scrub: true }
Ajouter un easing pour un effet plus fluide ease: "power2.out"
Appliquer à plusieurs images
- Le code gsap.utils.toArray(".section-parallax .parallax-content") gère déjà plusieurs sections automatiquement.