« Typed.js » : différence entre les versions
Aller à la navigation
Aller à la recherche
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| (7 versions intermédiaires par 2 utilisateurs non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
{{ | {{Ebauche}} | ||
==Introduction== | ==Introduction== | ||
Typed.js est une [[Bibliothèques JavaScript|bibliothèque Javascript]] qui permet | Typed.js est une [[Bibliothèques JavaScript|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 [https://mattboldt.com/demos/typed-js/ site de son auteur]. | Cette bibliothèque est disponible sur le [https://mattboldt.com/demos/typed-js/ site de son auteur]. | ||
| Ligne 13 : | Ligne 13 : | ||
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>. | 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> | <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. | |||
stringsElement: 'Mettez ici le texte qui va s'afficher avec l'animation', | <source lang="JavaScript"> | ||
var typed = new Typed("#idparagraphe", { | |||
stringsElement: 'Mettez ici le texte qui va s\'afficher avec l\'animation', | |||
typeSpeed: 0, | typeSpeed: 0, | ||
backSpeed: 0, | backSpeed: 0, | ||
| Ligne 21 : | Ligne 23 : | ||
startDelay: 1000, | startDelay: 1000, | ||
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. | ||
[[Category: | * <code>startDelay</code> correspond à la durée d'attente avant que l'animation d'affichage du texte ne se mette en route. | ||
[[Category: | * <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:Programmation]] | |||
[[Category:JavaScript]] | |||
Dernière version du 21 mars 2019 à 17:58
Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.
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.