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 :

1. Changer la vitesse de défilement
   • Remplace scrub: true par scrub: 1 ou scrub: 2 → ajoute un effet d’inertie (plus doux).
2. 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 }
3. Ajouter un easing pour un effet plus fluide ease: "power2.out"
4. Appliquer à plusieurs images
   • Le code gsap.utils.toArray(".section-parallax .parallax-content") gère déjà plusieurs sections automatiquement.

✅ Tu peux maintenant créer un effet parallaxe moderne et professionnel sur tes images avec Elementor + GSAP.