« Typed.js » : différence entre les versions

Dernière version du 21 mars 2019 à 16: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,
});

#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.

@@ Ligne 1 : / Ligne 1 : @@
-{{En construction}}
+{{Ebauche}}
-[[Category:Javascript]] [[Category:Bibliothèque javascript]]
+==Introduction==
+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].
+==Comment utiliser Typed.js==
+Typed.js est très simple à mettre en place sur une page [[HTML5|html]].
+Il suffit de télécharger la librairie sur le site de [https://mattboldt.com/demos/typed-js/ 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.
+<source lang="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,
+});
+</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:Programmation]]
+[[Category:JavaScript]]

« Typed.js » : différence entre les versions

Dernière version du 21 mars 2019 à 16:58

Introduction

Comment utiliser Typed.js

Menu de navigation

Rechercher

« Typed.js » : différence entre les versions