Apparition du texte lettre par lettre

L’effet letter reveal donne un rendu moderne et accrocheur à tes titres : chaque lettre apparaît l’une après l’autre au scroll, comme dans les intros animées des sites créatifs.

1. Ajouter le code dans Elementor

1. Va dans Modèle → Code personnalisé.
2. Cliquez sur Ajouter un nouveau code.
3. Colle le code suivant et place-le dans </body> – Fin :

<script src="https://unpkg.com/split-type"></script>

<style>
/* Empêche les sauts verticaux lors des masques */
.textLetterReveal .elementor-heading-title .line {
  overflow: hidden;
}

/* Chaque lettre est animée individuellement */
.textLetterReveal .elementor-heading-title .char {
  display: inline-block;
  will-change: transform, opacity;
}

/* Animation quand .fadeIn est ajouté */
.textLetterReveal.fadeIn .elementor-heading-title .char {
  transform: translateY(100%);
  opacity: 0;
  animation: tlr-goUp 0.9s cubic-bezier(0, 0, 0.24, 1.02) forwards;
  transform-origin: 0 100%;
}

/* Animation verticale */
@keyframes tlr-goUp {
  0%   { transform: translateY(100%); opacity: 0; }
  20%  { opacity: 0; }
  30%  { opacity: 0.4; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Variante avec rotation (si tu veux tester) */
@keyframes tlr-goUpTwist {
  0%   { transform: translateY(100%) rotate(8deg); opacity: 0.2; }
  20%  { opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var speedOfCharAnimation = 0.02; // vitesse entre lettres (0.02 = 40ms)

  var containers = document.querySelectorAll('.textLetterReveal');

  var io = ('IntersectionObserver' in window) ? new IntersectionObserver(function(entries){
    entries.forEach(function(entry){
      if (entry.isIntersecting) {
        entry.target.classList.add('fadeIn');
        io.unobserve(entry.target); // joue une seule fois
      }
    });
  }, { threshold: 0.2 }) : null;

  containers.forEach(function(container){
    var heading = container.querySelector('.elementor-heading-title');
    if (!heading) return;

    var splitter = new SplitType(heading, { types: 'lines, chars' });

    function applyCharDelays() {
      var chars = heading.querySelectorAll('.char');
      chars.forEach(function(char, i){
        char.style.animationDelay = (i * speedOfCharAnimation) + 's';
      });
    }
    applyCharDelays();

    var lastW = window.innerWidth;
    window.addEventListener('resize', function(){
      if (window.innerWidth !== lastW) {
        splitter.revert();
        splitter = new SplitType(heading, { types: 'lines, chars' });
        applyCharDelays();
        lastW = window.innerWidth;
      }
    });

    if (io) {
      io.observe(container);
    } else {
      container.classList.add('fadeIn');
    }
  });
});
</script>

Préparer ton titre sur Elementor

1. Ajoute un widget Titre (Heading).
2. Va dans Avancé → Classes CSS et ajoute : textLetterReveal
3. Ajoute une animation d’entrée simple (par ex. Fade In) dans Elementor.
   👉 Cela évite le bug d’affichage à l’apparition (lettres visibles avant animation).

Résultat attendu

• Au chargement ou quand le titre entre dans le viewport :
  → chaque lettre apparaît l’une après l’autre avec un effet fluide.
• L’animation se joue une seule fois (mais tu peux la rejouer en retirant io.unobserve(entry.target) du code).

Personnalisation

Tu peux ajuster :

Vitesse entre lettres : var speedOfCharAnimation = 0.02; → mets 0.05 pour ralentir, ou 0.01 pour accélérer.

Type d’animation : Remplace tlr-goUp par tlr-goUpTwist pour un effet avec rotation.

Déclenchement : Dans IntersectionObserver, modifie le threshold: 0.2 (20% visible avant déclenchement).