Animation

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

outils :
Illustration croce

Sommaire

Introduction

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

  1. 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.
  2. 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.
  3. 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é

Ces tutoriels pourraient vous intéresser

Nos tutoriels de la même catégorie

Rendre un élément déplaçable sur son site web

Webflow
Embed
Animation

Faire tourner un élément à l'infini

Webflow
Animation

Faire défiler un élément en boucle

Webflow
Animation
Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

Votre site est développé avec les meilleurs outils et les meilleurs pratiques

Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal. 

Figma

Pour designer votre site web sur mesure et optimiser son taux de conversion

Webflow

Pour une intégration pixel perfect et optimisée de votre site web

Client-first

Pour une organisation aux petits oignons de votre projet

Wized

Pour ajouter des fonctionnalités avancées à votre projet

Make

Pour automatiser vos fluxs de travail et vous faire gagner un max de temps