Animation d’apparition de texte avec effet de flou

Cet effet donne un rendu moderne et fluide : les lettres apparaissent une par une avec un léger flou qui disparaît progressivement.

Ajouter le code dans Elementor

Va dans Tableau de bord WordPress > Elementor > Code personnalisé > Ajouter un code.
Colle le script ci-dessous et choisis l’emplacement Fin du </body> .

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

<style>
  /* Conteneur des lettres */
  .letter {
    display: inline-block;
    overflow: hidden;
  }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  gsap.registerPlugin(ScrollTrigger);

  // Fonction pour splitter le texte en lettres individuelles
  function splitTextIntoSpans(element) {
    const text = element.innerText;
    element.innerHTML = "";
    element.style.visibility = "visible"; // affiché seulement après split
    text.split("").forEach(char => {
      const span = document.createElement("span");
      span.style.display = "inline-block";
      span.style.opacity = "0";
      span.style.filter = "blur(8px)";
      span.style.transform = "translateX(-50px)";
      span.innerText = char === " " ? "\u00A0" : char; // espace insécable
      element.appendChild(span);
    });
  }

  // Sélection de tous les titres avec la classe .text-blur
  let revealContainers = document.querySelectorAll('.text-blur .elementor-heading-title');

  revealContainers.forEach(title => {
    splitTextIntoSpans(title);

    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: title,
        start: "top 90%", // quand le titre entre dans la vue
        end: "top 20%",   // jusqu’à ce qu’il remonte
        toggleActions: "restart none none reset",
        scrub: 1,
        markers: false // passe à true pour débuguer
      }
    });

    // 1. Fade-in global du titre
    tl.fromTo(title, 
      { opacity: 0 }, 
      { opacity: 1, duration: 0.5, ease: "power2.out" }
    );

    // 2. Animation lettre par lettre
    tl.fromTo(title.querySelectorAll("span"), 
      { 
        x: '-50%',
        filter: 'blur(8px)',
        opacity: 0 
      }, 
      { 
        x: '0%',
        filter: 'blur(0)',
        opacity: 1,
        duration: 1.5,
        ease: "power4.out",
        stagger: 0.05
      },
      "-=0.3" // chevauche le fade-in global
    );
  });
});
</script>

Appliquer l’effet dans Elementor

1. Ouvre la page avec Elementor.

2. Sélectionne ton titre (widget « Titre »).

3. Dans l’onglet Avancé → Classes CSS, ajoute :

text-blur

4. Mets à jour la page et teste en scrollant → ton texte apparaîtra avec un effet flou + fade-in + décalage.

Astuces pour personnaliser l’animation

Tu peux facilement adapter le code :

Modifier le flou → change la valeur blur(8px) (par exemple blur(15px) pour un effet plus fort).
Changer la vitesse → ajuste duration: 1.5 (plus bas = plus rapide).
Espacement d’apparition → modifie stagger: 0.05 (0.1 = apparition plus lente, 0.02 = plus rapide).
Déclenchement au scroll → adapte start: "top 90%" (plus bas = animation démarre plus tôt).
Rejouer ou non → change toggleActions: "restart none none reset" (par exemple "play none none none" pour une seule fois).

Conseils pratiques

Utilise cet effet seulement sur quelques titres pour éviter de ralentir la page.
Combine-le avec un fond contrasté pour bien voir le flou.
Teste sur mobile, parfois réduire la taille des textes fluidifie l’effet.

Categorie