DEV Community

Cover image for Animation d'écriture automatique de texte en javascript
Kabirou ALASSANE
Kabirou ALASSANE

Posted on

Animation d'écriture automatique de texte en javascript

#javascript #tutorial #webdev

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:

  1. NPM Par le gestionnaire de dépendance NPM il faut procéder ainsi: 
npm install @futuravision/futura.js
Enter fullscreen mode Exit fullscreen mode

Une fois installer avec succès, vous pouvez importer le module AutoWriteText

import {AutoWriteText} from 'futura.js';
Enter fullscreen mode Exit fullscreen mode
  1. CDN Pour l'utiliser en CDN unpkg : 
<script src="https://unpkg.com/@futuravision/futura.js/dist/futurajs.min.js"></script>
Enter fullscreen mode Exit fullscreen mode
  1. GitHub Vous pouvez télécharger le projet sur GitHub 
git clone https://github.com/BlakvGhost/FuturaJS.git
Enter fullscreen mode Exit fullscreen mode

Ouvrir une balise script dans le head

<script src="futurajs/dist/futurajs.min.js" charset="utf-8"></script>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Laissez des étoiles sur le projet GitHub de futura.js en le visitant ici.

Top comments (0)

Read next

magsimuhammadessa profile image

Understanding Neomorphic Design in Web Development: What It Is, How to Achieve It, and When to Use It

Muhammad Essa -

furkangozukara profile image

Example Training Images Dataset, Trained Models, Grids and Full Training Configs, json files and more

Furkan Gözükara -

rverwey profile image

My First JavaScript Web App: Interactive Image Coordinate Finder

Ryan VerWey -

charan_sajjanapu profile image

Evolution of Web Tech and Browsers

Charan Sajjanapu -