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

Tutoriel3 minPublié le Mar 14, 2022Dernière mise à jour le ![COde custom dans Webflow et classe CSS "counterup"](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67126ad7bb81585dcf386cd3_64760069e93084646c9ef149_622f780de15001754dffe08b_Open-Graph-webflow-counter-up.png)Sommaire

[

Copied](#)[

](#)[

](#)[

](#)
- [H2 Example](#)

Résumez cet article avec une IA[

ChatGPT](#)[

Claude](#)[

Grok](#)[

Perplexity](#)[

Google AI](#)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](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67126ad9bb81585dcf38709f_64760069e93084646c9eec66_622f7429f8c00ff9a78d18f4_webflow-tuto-counterup.gif)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](https://try.webflow.com/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](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67126ad9bb81585dcf387093_64760069e93084646c9eec65_622f75aa22db9b83cf2b2680_counter-up-settings-webflow.png)

### É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 ](/fr/blog)!

Formation Webflow Gratuite[Commencer la formation

](https://www.youtube.com/watch?v=g2THwMHO-jI&list=PLrxXFd7V8-fjAJUo37CXDPvR4oEkmelkk)![Florian Bodelot](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a725470105160732b0a8a_florian-website-vf.webp)Florian BodelotCo-fondateur[

](/fr/team/florian-bodelot)[

](https://fr.linkedin.com/in/florian-bodelot-digidop)[

](https://twitter.com/florian_bodelot)+1200 lecteurs

## Restez informé(e) Abonnez-vous à notre newsletter pour des conseils et actus exclusives.

[S'inscrire

](https://digidopfr.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Prévisualiser la Newsletter

](https://digidopfr.substack.com/)

## Articles qui devraient vous intéresser

![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab92cc629d6018592f49d92_Best%20B2B%20SaaS%20Agencies%20in%202026_FR.webp)DocumentationTout voir

### Top 20 meilleures agences web et digitales pour SaaS B2B en 2026

[Top 20 meilleures agences web et digitales pour SaaS B2B en 2026](/fr/blog/top-agences-b2b-saas)Top 20 meilleures agences web et digitales pour SaaS B2B en 2026![Interface Webflow Source montrant les agents IA, l’édition de site et les Views par métier dans un espace de travail unifié.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDéveloppementTout voir

### Webflow lance Source. Notre avis sur ce shift.

[Webflow lance Source. Notre avis sur ce shift.](/fr/blog/webflow-lance-source)Webflow lance Source. Notre avis sur ce shift.![Taux de citation par plateforme IA : ChatGPT 100 %, Perplexity 100 %, Gemini 67 % et Claude 0 %.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationIATout voir

### Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA

[Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA](/fr/blog/comment-rendre-son-site-visible-chatgpt-perplexity-et-moteurs-ia)Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA[Voir tous les articles

](/fr/blog)Les meilleurs projets web
commencent par une conversation[Discuter avec un expert

](/fr/contact)[Réserver un appel

](/fr/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)