Adding a number scroll from one value to another in a website can have several uses:
Attracting attention : Movement naturally attracts the human eye. A scroll can therefore be used to highlight specific information or announcement that site designers want visitors to see.
Dynamic aspect : Scrolling can make a website look dynamic and modern, although this effect depends a lot on current design trends.
Navigation : In some cases, scrolling can be used as a navigation element, guiding users to different sections of a website or to external links.
However, there are also disadvantages to using text scrolling:
Readability : Text in motion can be difficult for some users to read.
Accessibility : Scrolling can cause problems for users with disabilities, especially those who use screen readers.
Compatibility : Not all browsers and devices handle animations well, which can cause display issues.
Distraction : If misused, a scrolling animation can distract more than it informs, especially if other elements of the site are also in motion.
If you are considering adding text scrolling to your website, it is essential to weigh the pros and cons, and to always test the functionality on different devices and browsers to ensure a good user experience.
Here's how to add it to your Webflow site
Add this script to the URL <head>of your page
Remember to replace the variable {your-id} with the id used in the previous step
<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>
Customize the code for a result adapted to your needs
Change the duration
const DURATION = 60000;
Represents the total duration of the animation in milliseconds (60 seconds or 1 minute in this example).
Change the final value
const FINAL_VALUE = 12000000;
Your target or final value that the animation should reach in milliseconds.
Change the interval
const INTERVAL = 10;
Represents how often the current value will be updated, in milliseconds.
Change the starting value
let CurrentValue = 1000000;
Set the current value to 1,000,000 (starting value).
Growth Marketer, Webflow expert and a jack of all trades. I take care of commercial operations, ensure the smooth running of projects and take care of issues related to marketing (SEO, Tracking, Copywriting, etc.)
