1- Importation de la bibliothèque JavaScript
Alors, pour commencer, on va se rendre sur Github et récupérer l’ensemble des fichiers :
On va venir copier le CDN dans un projet dans votre IDE (pour ma part, il s’agit de vs-code):
<script src="<https://unpkg.com/typewriter-effect@latest/dist/core.js>"></script>
2- Création du projet pour l’animation de type machine à écrire
Allez, on commence à coder.
On commence, à créer un dossier, puis on ouvre l’IDE :
: mkdir typewriter
: cd typewriter
: code ..
On va créer un fichier : ‘index.html’
Suite à cela, on va coder une page web de base :
On colle le script avant la balise <body>
Ensuite, on crée un fichier nommé “typewriter.js”
On revient dans index.html et on va venir lier le fichier juste en dessous du CDN
<script src="typewriter.js"></script>
exemple de code de base
Dans le fichier typewriter.js, on va venir inscrire ce code :
var app = document.getElementById('app');
var customNodeCreator = function(character) {
return document.createTextNode(character);
}
var typewriter = new Typewriter(app, {
loop: true,
delay: 75,
onCreateTextNode: customNodeCreator,
});
typewriter
.typeString('A simple yet powerful native javascript')
.pauseFor(300)
.start();
Explication des options de la bibliothèque en JavaScript
Alors bien sur vous pouvez vous amuser à personnaliser votre message.
En effet, tu peux passer des options et d’utiliser des méthodes :
Les options
Quand tu instancies ta classe “Typewriter” :
Tu peux changer le style du curseur en utilisant : cursor:"_"
Rajouter une class pour le css : cursorClassName:"tonNomDeClasse"
Créer une fonction de type “callback” etc
Les méthodes
Ensuite quand tu codes ton animation, tu peux utiliser ce que tu veux :
.typestring() => Ici tu viens placer ton message
.pauseFor() => A l'interieur tu viens définir un timer qui met en pause l'animation (en ms)
.deleteChars() => Ici l'animation va retirer un certain nombre de charactère
.deleteAll() => Efface l'entièreté du message
Utilise le CodePen pour t’amuser à expérimenter les diverses méthodes :
