Aujourd’hui, je suis ravi de partager avec vous une astuce Webflow époustouflante ! Si vous avez toujours rêvé d'intégrer un compteur de chiffres animé à votre site sans plonger dans les abysses du code, cet article est pour vous. On va explorer ensemble comment animer des chiffres sur votre site Webflow en utilisant la bibliothèque JavaScript de Finsweet, et ce, sans écrire une seule ligne de code. Prêt ? C'est parti !

Étape 1 : Préparation de votre Projet Webflow

Tout d'abord, ouvrez votre projet Webflow et préparez-vous à donner vie à vos chiffres. Si vous ne l'avez pas encore fait, c'est le moment de choisir un template qui convient à votre design.

Étape 2 : Intégration du Script Finsweet

Pour faire défiler vos chiffres, vous aurez besoin de la bibliothèque JavaScript de Finsweet. Heureusement, pas besoin de télécharger quoi que ce soit ! Rendez-vous simplement dans le "Custom Code" de votre page Webflow (situé dans les paramètres de projet), et copiez-y le script fourni par Fin Sweet. Cliquez sur "Save" et la première partie est terminée.

Étape 3 : Configuration des Attributs de Comptage

Identifiez maintenant les éléments texte où vous souhaitez voir les chiffres s'animer. Ensuite, dans l'onglet "Settings" de votre élément, ajoutez un attribut avec le nom "data-number" et assignez-lui la valeur "number". C'est aussi simple que ça !

Étape 4 : Personnalisation des Paramètres

Avec Finsweet attributes, vous avez la possibilité de peaufiner votre animation. Définissez un nombre de départ (start number) et, si vous le désirez, un nombre de fin (end number). Pour cela, ajoutez des attributs supplémentaires à votre élément texte avec les valeurs souhaitées.

Étape 5 : Ajustement du Déclenchement de l'Animation

Si votre compteur démarre trop tardivement lors du défilement, pas de panique. Avec un autre attribut "data-start", vous pouvez définir le point de démarrage de l'animation (par exemple, à 0 % de la section).

Étape 6 : Contrôle de la Vitesse

Vous trouvez que vos chiffres défilent trop vite ? Ajustez leur vitesse avec l'attribut "data-duration", en spécifiant le temps en millisecondes. Une valeur de "2000" signifie que l'animation durera deux secondes.

Finalisation et Mise en Ligne

Après avoir peaufiné les paramètres, publiez votre site. Allez-y, faites le grand saut et regardez votre compteur prendre vie !

Voilà, vous avez maintenant un compteur dynamique et attrayant qui ajoutera un cachet interactif à votre site Webflow. N’est-ce pas magique ?

Si vous avez trouvé ce guide utile, n'hésitez pas à l'apprécier et à partager. Et pour ne rien manquer de nos astuces et conseils, abonnez-vous et restez connecté pour nos prochains articles.

‍