Créer un Effet de Texte Animé sur Divi

Ajouter un effet de vague à votre texte

Bonjour à tous et bienvenue sur notre blog. Nous sommes ravis de vous présenter un contenu qui va certainement vous intéresser.

Dans cet article, vous trouverez tous les codes nécessaires pour créer un effet de texte animé, similaire à une vague, pour votre site web construit avec Divi. Cet effet dynamique et original est particulièrement adapté pour les en-têtes ou les titres de section.

Nous utilisons pour cela la bibliothèque JavaScript spécialisée GSAP, reconnue pour sa capacité à créer des animations web de haute performance.

Alors, êtes-vous prêt à donner une nouvelle dimension à votre texte ? Découvrez sans plus attendre les codes qui vous permettront de réaliser cet effet !

Ajouter un effet de vague à votre texte

Bonjour à tous et bienvenue sur notre blog. Nous sommes ravis de vous présenter un contenu qui va certainement vous intéresser.

Nous utilisons pour cela la bibliothèque JavaScript spécialisée GSAP, reconnue pour sa capacité à créer des animations web de haute performance.

Alors, êtes-vous prêt à donner une nouvelle dimension à votre texte ? Découvrez sans plus attendre les codes qui vous permettront de réaliser cet effet !

Le tuto en vidéo

Code HTML

Divi→ Theme Builder→ En-tête global→ Ajouter une ligne→ Ajouter un module texte→ Ajouter le code HTML ci-dessous dans la zone texte

<div id="wave-text" style="font-size: 16px;">VOTRE TEXTE</div>

Code CSS

Divi→ Personnaliseur de thème→ CSS additionnel→ Coller le code ci-dessous

#wave-text {
position: relative;
overflow: visible;
height: 1.2em;
}

#wave-text span {
display: inline-block;
transform-origin: 50% 50%;
}

Télécharger WP insert header- footer

Télecharger ici

Dans le nouvel onglet sur votre Dasboard WordPress cliquer sur « Code snippets », puis sur « Header & Footer »

Copier le code HTML ci-dessous dans la zone « Head »

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

Code Javascript

Copier le code en dessous du code HTML dans la zone « Head »

<script>
window.addEventListener('DOMContentLoaded', (event) => {
  const text = document.getElementById('wave-text');
  const strText = text.textContent;
  const splitText = strText.split("");
  text.textContent = "";
  for(let i=0; i < splitText.length; i++) {
    if (splitText[i] === ' ') {
      text.innerHTML += ' ';
    } else {
      text.innerHTML += "<span>"+ splitText[i] + "</span>";
    }
  }

  gsap.to('#wave-text span', {
    y: '+=20',
    duration: 0.5,
    ease: 'power2.inOut',
    repeat: -1,
    yoyo: true,
    stagger: {
      each: 0.1,
      from: 'start'
    }
  });
});
</script>

Voilà, vous n’avez plus qu’à regarder la magie opérée 😉