Comment créer des effets de frappe animés à l'aide de typed.js

Vue d'ensemble

Typed.js est une bibliothèque d'animation qui prend en charge le script Java et d'autres langages de script. Il fournit des effets d’animation de frappe sur le texte. Nous pouvons utiliser la bibliothèque en ajoutant un lien CDN à la bibliothèque ou en l'installant à l'aide de Node Package Manager (NPM) ou de Yarn. Il fournit une page Web avec une animation de frappe dans n'importe quel paragraphe ou titre. Vous devez donc en savoir plus sur l'effet d'animation de frappe de typed.js. Pour utiliser des animations, types.js fournit un constructeur appelé typed() qui accepte deux paramètres en entrée.

Grammaire

La syntaxe pour créer un objet de type constructeur est -

var typed = new Typed(element class or Id, callback function);

Dans la syntaxe donnée ci-dessus, la classe ou l'ID est l'élément cible sur lequel travaille l'animation de saisie. La fonction de rappel est une fonction avec un tableau de type chaîne et certaines propriétés de constructeur de type telles que la vitesse de frappe, la vitesse de retour, la boucle et le délai de vitesse de retour.

Algorithme

Étape 1 −Créez un fichier HTML dans un éditeur de texte et ajoutez-y un passe-partout HTML.

Étape 2− Ajoutez le lien CDN typed.js dans la balise head du document HTML.

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

Étape 3 − Créez maintenant un conteneur div avec le nom d'identification "typed-text".

<div id="typed-text"></div>

Étape 4 −Créez la balise script avant la fin de la balise body.

<script></script>

Étape 5 − Instanciez le constructeur typé, créez un objet et stockez-le dans une variable de référence.

var typed = new Typed();

Étape 6 − Transmettez les deux paramètres au constructeur typé comme nom d'identification de l'élément et transmettez une fonction contenant le texte de la chaîne et la vitesse de frappe comme vitesse de frappe.

var typed = new Typed('#typed-text', {
   strings: ["Welcome to the tutorials point. There are many different course on our platform. We also provide you with the tutorial for wach and every techcnology.", "incidunt quasi aperiam ipsum dolorum nisi rem inventore error voluptate? Voluptate laborum iure,. Blanditiis corporis expedita temporibus atque sit, molestiae itaque in ullam, ex pariatur incidunt quasi aperiam ipsum dolorum nisi rem inventore error voluptate? Voluptate laborum iure, dolores beatae ratione eos laboriosam velit corrupti unde praesentium quidem, minima qui cumque. Deserunt doloribus modi amet."],
   typeSpeed: 40,
   backSpeed: 10,
   loop: true
});

Étape 7 −Ouvrez le fichier index.html dans le navigateur, vous verrez l'animation de saisie dans le texte cible.

Exemple

Dans cet exemple, nous utiliserons typed.js pour créer une animation de saisie dans du texte.

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


   
tutorialspoint.com
   

   <script>
      var typed = new Typed('#typed-text', {
         strings: ["Welcome to the tutorials point. There are many different course on our platform. We also provide you with the tutorial for each and every techcnology.", "incidunt quasi aperiam ipsum dolorum nisi rem inventore error voluptate? Voluptate laborum iure,. Blanditiis corporis expedita temporibus atque sit, molestiae itaque in ullam, ex pariatur incidunt quasi aperiam ipsum dolorum nisi rem inventore error voluptate? Voluptate laborum iure, dolores beatae ratione eos laboriosam velit corrupti unde praesentium quidem, minima qui cumque. Deserunt doloribus modi amet."],
         typeSpeed: 40,
         backSpeed: 10,
         loop: true
     });
   </script>

L'image ci-dessous montre le résultat de l'exemple ci-dessus, affichant du texte sur l'écran du navigateur. Lorsqu'un utilisateur ouvre ce fichier HTML dans un navigateur, l'utilisateur peut voir une animation de frappe fonctionnant en temps réel.

Conclusion

Lorsque vous utilisez typed.js, vous devez vérifier et écrire correctement la syntaxe pour initialiser les objets de type, s'il y a des erreurs dans la syntaxe, l'animation ne fonctionnera pas correctement. Nous pouvons personnaliser la vitesse de frappe et la latence selon nos besoins en modifiant les valeurs de la fonction de rappel transmise dans le constructeur de type.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!