« Typed.js » : différence entre les versions
(Création de la page Typed.js) |
Aucun résumé des modifications |
||
| Ligne 27 : | Ligne 27 : | ||
* "startDelay" correspond à la durée d'attente avant que l'animation d'affichage du texte ne se mette en route. | * "startDelay" correspond à la durée d'attente avant que l'animation d'affichage du texte ne se mette en route. | ||
* "backDelay" paramètre la durée d'attente avant que l'animation d'effacement du texte se mette en route. | * "backDelay" paramètre la durée d'attente avant que l'animation d'effacement du texte se mette en route. | ||
[[Category: | [[Category:Technologies]] | ||
[[Category: | [[Category:Programmation]] | ||
[[Category:JavaScript]] | |||
Version du 30 janvier 2019 à 11:53
Cet article est en construction: un auteur est en train de le modifier.
En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.
Introduction
Typed.js est une bibliothèque Javascript qui permet de créer d'animer l'affichage de texte. L'animation consiste simplement à afficher le texte lettre par lettre comment lorsque le texte est tapé sur un clavier.
Cette bibliothèque est disponible sur le site de son auteur.
Comment utiliser Typed.js
Typed.js est très simple à mettre en place sur une page html.
Il suffit de télécharger la librairie sur le site de Typed.js, puis d'insérer le fichier javascript typed.js (ou typed.min.js lors du déploiement de votre projet) dans le dossier de votre projet de site internet.
Il faut maintenant insérer le script dans votre html à l'aide de la commande suivante. De préférence, ajoutez cette commande à la fin de votre page html, avant de fermer la balise <body>.
<script src="votre-chemin/typed.js"></script>
Voici la commande la plus simple pour créer votre animation. Insérez cette commande dans votre script Javascript.
var typed = new Typed("#idparagraphe", {
stringsElement: 'Mettez ici le texte qui va s'afficher avec l'animation',
typeSpeed: 0,
backSpeed: 0,
backDelay: 500,
startDelay: 1000,
loop: false,
});
- "#idparagraphe" fait référence à l'ID de la balise qui va accueillir votre texte animé. Vous pouvez sélectionner par exemple un paragraphe <p> ou un <input>.
- "stringsElement: 'texte' " fait référence au texte qui sera affiché par l'animation. Remplacez texte par le texte que vous souhaitez animer. Vous pouvez également placer votre texte dans une variable et insérer le nom de la variable dans ce paramètre.
- "typeSpeed" et "backSpeed" paramètre la vitesse d'affichage et d'effacement de l'animation de texte.
- "startDelay" correspond à la durée d'attente avant que l'animation d'affichage du texte ne se mette en route.
- "backDelay" paramètre la durée d'attente avant que l'animation d'effacement du texte se mette en route.