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).
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
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
