,

Comment animer un titre dans WordPress avec typed.js ?

Auteur : Baptiste Pagès
Mis à jour le :

Aujourd'hui je vous partage une méthode pour animer un titre dans WordPress (et plus particulièrement dans Gutenberg) sans plugin grâce à la librairie javascript typed.js.

Code à copier / coller

Le script qui importe typed.js, à placer avant le texte à animer :

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

Le texte à animer en HTML :

<div id="typed-strings">
  <p>Des pâtisseries <strong>artisanales</strong>.</p>
  <p>Des pâtisseries faites avec des <strong>ingrédients biologiques</strong>.</p>
  <p>Des pâtisseries préparées <strong>avec amour</strong>.</p>
</div>
<h2><span id="typed"></span></h2>

Et le script qui initialise l'animation du texte, à placer après le texte à animer :

<script>
var typed = new Typed('#typed', {
    stringsElement: '#typed-strings',
    typeSpeed: 70,
    backSpeed: 35,
    loop:true,
  });
</script>

À propos des partenaires : sur mon blog, je recommande certains outils partenaires via des liens d'affiliations. Si vous commandez via ces liens, je touche une commission. Ceci étant, je ne mets en avant que des outils que j'utilise réellement et que j'ai testé personnellement. Merci de votre confiance 🙂

Mon Ebook Gratuit :
Mes 77 ressources WordPress Favorites

Rejoignez ma newsletter et obtenez en cadeau les 77 ressources WordPress que j'utilise au quotidien avec les projets de mes clients. Je partage avec vous de vraies pépites dans cet ebook 😉