Bonjour, nous allons voir dans ce tutoriel comment utiliser la librairie Futura.js pour créer une animation d'écriture automatique de texte en JavaScript.
Futura.js est une librairie javascript d'implémentation d'animation, de carrousels et plus…
Nous allons d'abord installer futura.js dans notre projet, il existe trois moyens pour le faire, soit par:
- NPM Par le gestionnaire de dépendance NPM il faut procéder ainsi:
npm install @futuravision/futura.js
Une fois installer avec succès, vous pouvez importer le module AutoWriteText
import {AutoWriteText} from 'futura.js';
- CDN Pour l'utiliser en CDN unpkg :
<script src="https://unpkg.com/@futuravision/futura.js/dist/futurajs.min.js"></script>
- GitHub Vous pouvez télécharger le projet sur GitHub
git clone https://github.com/BlakvGhost/FuturaJS.git
Ouvrir une balise script dans le head
<script src="futurajs/dist/futurajs.min.js" charset="utf-8"></script>
Création de l'animation d'écriture automatique de texte
Maintenant que vous avez installer futura.js, nous allons pouvoir implémenter notre animation d'écriture automatique de texte dans sur notre site web:
- Vous devez extensier AutoWriteText avec les options de votre choix
new fJs.AutoWriteText({
separator: 'separator',
timeout: 'the time out in milisecond'
});
// fJs lorsque vous utiliser un cdn ou le github, par contre
// utiliser simplement AutoWriteText() pour un NPM
Maintenant, il faut définir en sur site dans la balise qui doit contenir le texte, les attributs data pour l'initialiser:
<h1 data-fv-anim='autowrite' data-fv-data="Write Here Your Text"></h1>
// data-fv-anim="autowrite": pour initialiser l'animation
// data-fv-data="Write Here Your Text": Pour le passer la texte qui sera auto ecrit.
Exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<script src="https://unpkg.com/@futuravision/futura.js/dist/futurajs.min.js"></script>
</head>
<body>
<h1 data-fv-anim='autowrite' data-fv-data="Write Here Your Text"></h1>
</body>
<script type="text/javascript">
new fJs.AutoWriteText({
separator: '|',
timeout: 300
});
</script>
</html>
Laissez des étoiles sur le projet GitHub de futura.js en le visitant ici.
Top comments (0)