Pour rendre votre site plus attractif, vous pouvait ajouter cet effet sympa, qui permettra d'afficher plusieurs mots qui vont se succéder avec un effet de suppression et de réécriture en boucle. Cet effet pourra être placé à la fin d'une phrase comme dans un texte.
1ère étape
Commençons avec l'insertion des librairies dans le code HTML.
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
</head>Nous allons simplement insérer les librairies dont nous auront besoin. Dans se cas jQuery et Typed.
La première (jQuery) va permettre de coder notre animation beaucoup plus rapidement, la seconde (Typed) va elle nous permettre de créer notre animation avec cet effet qui donne l'impression que quelqu'un est en train d'écrire et supprimé le texte.
2ème étape
Le code HTML.
<body>
<div class="presentation">Je suis, <span class="texte"></span></div>
</body>Nous aurons besoin de la classe .texte contenues dans la balise span pour pouvoir y ajouter le texte que nous souhaitons faire apparaître puis disparaître en boucle automatiquement.
3ème étape
Styliser la classe presentation.
.presentation {
font-weight: bold;
font-size: 20px;
}
4ème étape
Nous allons maintenant gérer la rotation.
$(document).ready(function(){
var typed = new Typed(".texte", {
strings: ["développeur", "freelance","blogger"],
typeSpeed: 80,
backSpeed: 60,
loop: true
});
});
Dans l’étape précédente, nous utilisons jQuery pour attendre que la page soit bien chargée avant d’ajouter notre animation.
Une fois que notre page est chargée, nous utilisons la fonction Typed, qui nous permet de définir les chaînes de caractères à afficher (strings).
Pour la gestion de l'écriture, nous utiliserons typeSpeed et backSpeed pour la suppression. Nous précisons ensuite si nous souhaitons que l'animation tourne en boucle ou non grâce à loop.
Félicitations ! Notre animation est prête !
