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

outils :

Introduction

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

 <script>
const DUREE = 60000; // Durée totale de l'animation en millisecondes (1 minute)
const VALEUR_FINALE = 12000000; // La valeur cible

const INTERVALLE = 10; // en millisecondes
const AUGMENTATION = VALEUR_FINALE / (DUREE / INTERVALLE);

let valeurActuelle = 1000000;
const element = document.getElementById("{votre-id}");

const interval = setInterval(() => {
    valeurActuelle += AUGMENTATION;

    // Pour rendre l'animation des centaines dynamique
    const animationCentaines = Math.floor(Math.random() * 100);

    let valeurAffichee = valeurActuelle + animationCentaines;

    // Si on dépasse la valeur finale, on arrête l'interval
    if (valeurActuelle >= VALEUR_FINALE) {
        clearInterval(interval);
        valeurAffichee = VALEUR_FINALE;
    }

    // Formatage avec une virgule comme séparateur de milliers et ajout du symbole $
    element.textContent = '$' + Math.round(valeurAffichee).toLocaleString('en-US');
    
}, INTERVALLE);
</script>

‍

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

Modifiez la durée

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

const VALEUR_FINALE = 12000000;

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

Modifiez l'intervalle

const INTERVALLE = 10;

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

Modifiez la valeur de départ

let valeurActuelle = 1000000;

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

Bonus

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.

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

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

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

‍

Publiez et c'est gagné

Sandro D.

Mis à jour le

8/10/2024

Growth Marketer, expert Webflow et touche à tout. Je m'occupe des opérations commerciale, veille au bon déroulement des projets et m’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)