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

Tutoriel

March 14, 2022

3 min

H2 Example

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.

Étape 1 : Ajoutez le code à votre page

Copier-coller le code suivant dans le "Before </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

Co-fondateur

Articles qui devraient vous intéresser

IA agentique vs IA générative : Comprendre les différences fondamentales et leurs applications

Client-First vs Lumos : Quel framework Webflow choisir en 2025 ?

ChatGPT 4o vs Midjourney : quel est le meilleur outil pour générer des images IA ?

Voir tous les articles

Transformez votre site web en un moteur de croissance.

Nous contacter