Animation d’écriture automatique de texte en javascript

2 min readFeb 5, 2023

Photo by Caspar Camille Rubin on Unsplash

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.

Animation d’écriture automatique de texte en javascript

Création de l’animation d’écriture automatique de texte

Written by Kabirou ALASSANE