Ajouter un compteur de chiffres animés (site Webflow)

Tutoriel
March 14, 2022
3 min
COde custom dans Webflow et classe CSS "counterup"
Points clés de l'article

C'est quoi un compteur de chiffres animés ?

Un compteur animé est l'effet qui anime les chiffres lorsqu'un utilisateur sur votre site web arrive à la section. Cette animation apportera un style vivant à votre site Web. Il sera plus dynamique et plus agréable pour les yeux de vos utilisateurs.

Vous pouvez voir ci-dessous un gif d'un compteur animé qui s'affiche sur la page lorsque les utilisateurs accèdent pour la première fois à la section en question de votre site Web.

Animation avec des chiffres dynamiques sur une page Webflow
Animation compteur made in Webflow

Comment ajouter l'effet à un site Webflow ?

Pas encore possible en 100% no-code, mais on vous partage le Javascript 😉 Suivez le guide, rapide, en 3 étapes seulement.

{{custom-blog-cta}}

Étape 1 : Ajoutez le code à votre page

Copier-coller le code suivant dans le "Before <!-- fs-richtext-ignore --></body> tag" de la page en question de votre projet Webflow

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/jquery.counterup@2.1.0/jquery.counterup.min.js"></script>
<script>
jQuery(document).ready(function( $ ) {
  $('.counterup').counterUp({
    delay: 100, // the delay time in ms
    time: 2000 // the speed time in ms
  });
});
</script>

Étape 2 : Créez une classe CSS

Créez une classe CSS : counterup et affectez la sur l'élément HTML - text block ou paragraph - de votre projet.

Custom code et CSS configuration Webflow

Étape 3 : Publiez votre site

Publiez votre site et tester l'effet en live ! (Le code java ne fonctionne que lorsque le site est publié)

Ps : retrouvez pleins d'autres tips et formations sur Webflow dans le blog de Digidop !

Formation Webflow Gratuite
Commencer la formation
Florian Bodelot
Florian Bodelot
Co-fondateur

Articles qui devraient vous intéresser

A woman speaks on stage at a conference, wearing a headset microphone. Behind her, a large black screen displays the question “What then?” in bold white text.
Evénements
Webflow

Digidop participe à la FLOWconf 2025, le plus grand événement Webflow & marketing d’Europe.

Digidop participe à la FLOWconf 2025, le plus grand événement Webflow & marketing d’Europe.
Aperçu visuel de plusieurs typographies modernes utilisées sur le web en 2025, chacune présentée sur une image de fond inspirante : Editorial New, DM Serif Display, Aeonik, SF Pro Rounded, Rader, Champ, Monument, Canicule, Clash Display, Supply, Agrandir, et d’autres — une composition graphique mettant en avant la diversité typographique.
Documentation
Design

Les 20 meilleures typographies pour un site web moderne et impactant en 2025

Les 20 meilleures typographies pour un site web moderne et impactant en 2025
Mosaic of homepage designs from several Webflow agencies (Digidop, N4, Refokus, Flow Ninja, Tonik, Finsweet, Edgar Allan), showcasing diverse creative approaches and visual identities centered around the Webflow logo.
Storytelling
Webflow

Mon top 7 des meilleures agences Webflow en 2025 (avis d’un fondateur d’agence)

Mon top 7 des meilleures agences Webflow en 2025 (avis d’un fondateur d’agence)

Transformez votre site web en un moteur de croissance.

Nous contacter