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
Comment créer un CMS slider sur Webflow ?
Comment personnaliser les slider dots sur Webflow ?
Comment intégrer Hotjar à Webflow ?