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.
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 !
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 😉
