As-tu déjà été sur un site web et remarqué cette petite barre dynamique qui montre votre progression à mesure que vous défilez ?

Cette barre est appelée "indicateur de scroll", et elle est devenue une tendance incontournable dans le design web. Si tu escurieux de savoir comment la créer sur Webflow, t'es au bon endroit !

1. Qu'est-ce qu'un indicateur de scroll ?

‍Un indicateur de scroll est une barre visuelle qui avance à mesure que vous parcourez une page web. Elle est souvent placée en haut de la page et change de taille ou de couleur en fonction de la progression du scroll. Sur un article de blog, par exemple, cette barre pourrait s'étendre de gauche à droite pour indiquer à quel point vous avez progressé dans la lecture.

2. Comment le créer avec Webflow?

‍Pour ceux qui ne connaissent pas, Webflow est un outil incroyable pour le design web. Pour créer notre indicateur de scroll :

• Commencez par insérer une nouvelle div juste sous votre barre de navigation.
• Nommez cette div avec une classe comme "scroll-indicator".
• Ajoutez un peu de style à cette div - dans notre cas, nous avons choisi une couleur orange vibrante pour qu'elle se démarque.
• Ensuite, ajustez la hauteur pour qu'elle soit appropriée à votre design.

3. Animer l'indicateur de scroll

‍L'animation est ce qui rend cet indicateur vivant.

Avec Webflow, il est assez simple de le faire :

• Rendez-vous dans le panneau d'animation.
• Sélectionnez "while page is scrolling" comme déclencheur.
• Créez une nouvelle animation et définissez les points de départ et d'arrivée (0 % étant le haut de la page et 100 % le bas).
• Utilisez la propriété "scale" pour ajuster comment l'indicateur se déplace.

Note : Vous voudrez probablement que votre barre démarre du côté gauche et non du centre. Pour ce faire, assurez-vous d'ajuster le "transform origin" pour qu'il commence à partir de la gauche.

Et voilà ! Avec ces étapes simples, vous avez maintenant un indicateur de scroll fonctionnel sur votre site. Si vous souhaitez aller plus loin avec des designs plus avancés, nous proposons des formations avancées chez CORIACE 💪 où vous pourrez apprendre à créer des indicateurs de scroll encore plus sophistiqués.

N'oubliez pas de vous inscrire via le lien dans la description pour une formation d'initiation gratuite à Webflow.

À bientôt pour d'autres astuces et tutoriels !