Comment animer un titre dans WordPress avec typed.js ?

avatar de baptiste pagès
Par Baptiste Pagès le 16 septembre 2021

Publié dans Webdesign

Mis à jour le 16 septembre 2021

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>
Bienvenue sur mon site !

Je m'appelle Baptiste.

Je suis un webdesigner et consultant SEO indépendant spécialisé dans WordPress. Depuis maintenant plus de six ans, j'aide les petites entreprises à se démarquer sur Internet et à développer leur visibilité.

J'écris aussi pas mal d'articles pour aider les débutants. N'hésitez pas à me contacter si vous avez une question !

Cet article vous a plu ?

Voici d'autres articles populaires qui vous intéresseront peut-être :
SEO
Les bases du Référencement Organique
Apprenez les bases du référencement organique afin d'éviter les erreurs de débutant.
Lire cet article
DESIGN
Comment changer la police d'un site WordPress ?
Tout ce qu'il faut savoir pour gérer la typographie de votre site WordPress est ici, suivez le guide !
Lire cet article
CODE
Comment ajouter du CSS additionnel dans WordPress ?
Découvrez comment ajouter facilement du code CSS additionnel dans n'importe quel site WordPress.
Lire cet article
WOOCOMMERCE
Comment importer des produits dans WooCommerce ?
Apprenez à importer des produits à votre boutique WooCommerce très facilement (en vidéo).
Lire cet article
Je m'appelle Baptiste et je suis un webdesigner / consultant SEO spécialisé dans WordPress, basé à Grasse dans le Sud de la France. J'aide les petites entreprises à développer leur présence web dans ce monde de fou 😉