« Typed.js » : différence entre les versions
m (→Introduction : Correction erreur d'écriture) |
(Utilisation de la syntaxe pour améliorer la lecture du code) |
||
| Ligne 14 : | Ligne 14 : | ||
<script src="votre-chemin/typed.js"></script> | <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. | Voici la commande la plus simple pour créer votre animation. Insérez cette commande dans votre script Javascript. | ||
<source lang="JavaScript"> | |||
var typed = new Typed("#idparagraphe", { | var typed = new Typed("#idparagraphe", { | ||
stringsElement: 'Mettez ici le texte qui va s'afficher avec l'animation', | stringsElement: 'Mettez ici le texte qui va s'afficher avec l'animation', | ||
| Ligne 22 : | Ligne 24 : | ||
loop: false, | loop: false, | ||
}); | }); | ||
* | </source> | ||
* | |||
* | * <code>#idparagraphe</code> fait référence à l'ID de la balise qui va accueillir votre texte animé. Vous pouvez sélectionner par exemple un paragraphe <nowiki><p> ou un <input></nowiki>. | ||
* | * <code>stringsElement: 'texte'</code> 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. | ||
* | * <code>typeSpeed</code> et <code>backSpeed</code> paramètre la vitesse d'affichage et d'effacement de l'animation de texte. | ||
* <code>startDelay</code> correspond à la durée d'attente avant que l'animation d'affichage du texte ne se mette en route. | |||
* <code>backDelay</code> paramètre la durée d'attente avant que l'animation d'effacement du texte se mette en route. | |||
[[Category:Technologies]] | [[Category:Technologies]] | ||
[[Category:Programmation]] | [[Category:Programmation]] | ||
[[Category:JavaScript]] | [[Category:JavaScript]] | ||
Version du 6 février 2019 à 14:49
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 d'animer l'affichage de texte sur des sites internet. 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,
});
#idparagraphefait 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.typeSpeedetbackSpeedparamètre la vitesse d'affichage et d'effacement de l'animation de texte.startDelaycorrespond à la durée d'attente avant que l'animation d'affichage du texte ne se mette en route.backDelayparamètre la durée d'attente avant que l'animation d'effacement du texte se mette en route.