Design

2 vues

5 min

Ajouter une animation de défilement de nombre de X à X

Introduction

Variable	Valeur exemple	Description
DUREE	60000	Durée totale en millisecondes
VALEUR_FINALE	12000000	Valeur cible à atteindre
INTERVALLE	10	Fréquence de mise à jour (en ms)
valeurActuelle	1000000	Valeur de départ

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter une animation de défilement de nombre de X à X.

L'ajout d'un défilement de nombre d’une valeur à une autre dans un site web peut avoir plusieurs usages :

Attirer l'attention : Le mouvement attire naturellement le regard humain. Un défilement peut donc être utilisé pour mettre en avant une information ou une annonce spécifique que les concepteurs du site souhaitent que les visiteurs voient.
Aspect dynamique : Le défilement peut donner un aspect dynamique et moderne à un site web, bien que cet effet dépende beaucoup des tendances actuelles en matière de conception.
Navigation : Dans certains cas, le défilement peut être utilisé comme un élément de navigation, guidant les utilisateurs vers différentes sections d'un site web ou vers des liens externes.

Cependant, il y a aussi des inconvénients à utiliser un défilement de texte :

Lisibilité : Un texte en mouvement peut être difficile à lire pour certains utilisateurs.
Accessibilité : Les défilements peuvent poser des problèmes pour les utilisateurs ayant des handicaps, en particulier ceux qui utilisent des lecteurs d'écran.
Compatibilité : Tous les navigateurs et appareils ne gèrent pas bien les animations, ce qui peut entraîner des problèmes d'affichage.
Distraction : Si elle est mal utilisée, une animation de défilement peut distraire plus qu'elle n'informe, surtout si d'autres éléments du site sont également en mouvement.

Si vous envisagez d'ajouter un défilement de texte à votre site web, il est essentiel de peser les avantages et les inconvénients, et de toujours tester la fonctionnalité sur différents appareils et navigateurs pour garantir une bonne expérience utilisateur.

Voici comment l’ajouter dans votre site Webflow

‍

Ajoutez ce script dans la le <head> de votre page

Pensez à bien remplacer la variable {votre-id} par l’id utilisé à l’étape précédente

‍

Personnalisez le code pour un résultat adapté à vos besoins

Modifiez la durée

bon à savoir

const DUREE = 60000;

Représente la durée totale de l'animation en millisecondes (60 secondes ou 1 minute dans cet exemple).

Modifiez la valeur finale

bon à savoir

const VALEUR_FINALE = 12000000;

Votre valeur cible ou finale que l'animation doit atteindre en milliseconde.

Modifiez l'intervalle

bon à savoir

const INTERVALLE = 10;

Représente la fréquence à laquelle la valeur actuelle sera mise à jour, en millisecondes.

Modifiez la valeur de départ

bon à savoir

let valeurActuelle = 1000000;

Initialise la valeur actuelle à 1 000 000 (valeur de départ).

Bonus

bon à savoir

const animationCentaines = Math.floor(Math.random() * 100);

Génère un nombre aléatoire entre 0 et 99. Utilisé pour donner un effet d'animation dynamique aux centaines lors de l'affichage.

bon à savoir

element.textContent = '$' + Math.round(valeurAffichee).toLocaleString('en-US');

Formatage US avec une virgule comme séparateur de milliers et ajout du symbole $. Pour avoir un résultat en € et un formatage FR vous pouvez utiliser le code suivant

bon à savoir

element.textContent = '€' + Math.round(valeurAffichee).toLocaleString('fr-FR');

Supprimez simplement cette partie du code pour enlever le formatage et l'unité !

‍

bon à savoir

Pour déclencher l'animation au scroll plutôt qu'au chargement, enveloppez le setInterval dans un IntersectionObserver. C'est plus performant et plus cohérent visuellement.

Publiez et c'est gagné

bon à savoir

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

4.9/5 • 97 avis

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

on en discute

4.9/5 • 97 avis

Découvrir

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Ajouter une animation de défilement de nombre de X à X

Introduction

Ajoutez ce script dans la le <head> de votre page

Personnalisez le code pour un résultat adapté à vos besoins

Modifiez la durée

const DUREE = 60000;

Modifiez la valeur finale

const VALEUR_FINALE = 12000000;

Modifiez l'intervalle

const INTERVALLE = 10;

Modifiez la valeur de départ

let valeurActuelle = 1000000;

Bonus

const animationCentaines = Math.floor(Math.random() * 100);

element.textContent = '$' + Math.round(valeurAffichee).toLocaleString('en-US');

element.textContent = '€' + Math.round(valeurAffichee).toLocaleString('fr-FR');

Pour déclencher l'animation au scroll plutôt qu'au chargement, enveloppez le setInterval dans un IntersectionObserver. C'est plus performant et plus cohérent visuellement.

Publiez et c'est gagné

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

tutoriels similaires