Comment faire défiler un nombre sur Webflow - Finsweet Attributes

Illustration number count
Home

>

Blog

>

Comment faire défiler un nombre sur Webflow - Finsweet Attributes

Dans le monde du no-code et particulièrement sur Webflow, animer un site web avec des nombres qui défilent est une fonctionnalité attrayante. Elle peut ajouter une touche dynamique à votre site. Heureusement, avec les attributs Finsweet, cette tâche devient un jeu d'enfant. Voici un guide étape par étape pour vous aider à intégrer cette fonctionnalité sur votre site Webflow.

Étape 1: Copiez le script et collez-le dans le champ <head> de votre page

Pour commencer, vous devez intégrer le script nécessaire pour activer la fonctionnalité de défilement de nombre. Cela se fait en copiant et collant le script suivant dans la section <head> de votre page Webflow :

<!-- [Attributes by Finsweet] Number Count -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-numbercount@1/numbercount.js"></script>

Étape 2: Appliquer des attributs aux éléments de la page

Après avoir ajouté le script, l'étape suivante consiste à appliquer des attributs spécifiques à vos éléments de page.

Sectionnez votre texte et ajoutez-lui l’attribut suivant :

Nom: 'fs-numbercount-element'
Valeur: 'number'

Cette simple action suffit pour obtenir un nombre qui défile. Mais, si vous souhaitez personnaliser davantage l'animation, voici quelques options supplémentaires :

- La valeur de départ du comptage

Nom: 'fs-numbercount-start'
Valeur: '0'

- La valeur d'arrêt du compteur

Nom: 'fs-numbercount-end'
Valeur: '100'

- Durée en millisecondes (ms) de l’animation

Nom: 'fs-numbercount-duration'
Valeur: '1000'

- Définit quand l'animation doit commencer en fonction du défilement

Nom: 'fs-numbercount-threshold'
Valeur: '25'

Conclusion

L'utilisation de Finsweet Attributes pour faire défiler un nombre sur Webflow est une méthode simple et efficace. Ces étapes vous permettent d'ajouter une touche professionnelle à votre site sans avoir besoin de compétences en codage. En suivant ces instructions, vous serez en mesure de créer des animations numériques captivantes qui renforceront l'engagement des utilisateurs sur votre site.

N'oubliez pas, les possibilités sont vastes avec Webflow et Finsweet Attributes. L'exploration et l'expérimentation sont les clés pour créer des sites uniques et impressionnants. Essayez, et vous serez surpris par la facilité et l'efficacité de ces outils!

Articles qui pourraient vous intéresser

illustration d'un CMS slider

Comment créer un CMS slider sur Webflow ?

illustration d'un CMS slider

Comment personnaliser les slider dots sur Webflow ?

illustration d'un CMS slider

Comment intégrer Hotjar à Webflow ?