Badge Webflow Award Winner 2023

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

Guide gratuit pour ajouter un effet compteur de nombre sur votre site Webflow au moment où l'utilisateur arrive sur une section avec des chiffres de votre site.

Publié le 
14/3/2022
Modifié le 
27/3/2023
5 min
COde custom dans Webflow et classe CSS "counterup"

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 <!-- 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 !

Prêt(e) à avoir un site qui convertit ?

Améliorer votre visibilité en ligne grâce à l’experience, l’excellence et la réactivité de Digidop !

Restez informés de l’actu Digidop !