Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

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

Florian Bodelot
Florian Bodelot
March 14, 2022
COde custom dans Webflow et classe CSS "counterup"

Tables des matières

1. 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

2. Comment ajouter l'effet à un site Webflow ?

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

2.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>"

2.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

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

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions