La navigation est un élément clé de tout site web, influençant directement l'expérience utilisateur. Aujourd'hui, nous allons apprendre à créer une barre de navigation qui disparaît lorsqu'on scroll vers le bas et réapparaît lorsqu'on scroll vers le haut sur Webflow. Suivez ce guide étape par étape pour améliorer la navigation de votre site web dès maintenant.

1. Préparation du projet

Assurez-vous d'avoir déjà une barre de navigation dans votre projet Webflow. Cette étape est cruciale car elle constitue la base de notre tutoriel.

2. Utilisation du panneau d'animation (Interactions)

Rendez-vous dans le panneau d'animation, également connu sous le nom d'Interactions. Ici, nous allons utiliser un déclencheur spécifique : "Page Scrolled" (Page défilée).

3. Configuration de l'animation pour le scroll vers le bas

• Étape 3.1: Créez une nouvelle animation et nommez-la "Navigation (Invisible on Scroll Down)".
• Étape 3.2: Sélectionnez votre composant de navigation et ajoutez une propriété de mouvement. Déplacez-le sur l'axe des Y de 100% pour le faire disparaître lors du scroll vers le bas.
• Étape 3.3: Ajustez l'animation pour qu'elle soit fluide, et non linéaire, avec une durée d'environ 0,3 à 0,5 seconde.

4. Configuration de l'animation pour le scroll vers le haut

• Étape 4.1: Dupliquez l'animation créée précédemment et renommez-la "Navigation (Visible on Scroll Up)".
• Étape 4.2: Remplacez le "-100%" par "0%" sur l'axe des Y pour faire réapparaître la barre de navigation lors du scroll vers le haut.
• Étape 4.3: Assurez-vous que l'animation est également fluide et a une durée d'environ 0,5 seconde.

5. Testez votre animation

Allez dans l'aperçu (preview) de Webflow et testez votre animation pour vous assurer que tout fonctionne correctement. La barre de navigation devrait disparaître lorsque vous scrollez vers le bas et réapparaître lorsque vous scrollez vers le haut.

6. Astuce bonus - Utilisation des offsets

Vous pouvez ajouter des offsets pour contrôler à quel moment la barre de navigation doit disparaître ou réapparaître. Par exemple, vous pouvez définir un offset de 5% pour que la barre de navigation ne disparaisse/réapparaisse que lorsque l'utilisateur a scrollé de 5% de la page.

Conclusion

Vous avez maintenant une barre de navigation dynamique qui améliore l'expérience utilisateur sur votre site Webflow. Si vous avez trouvé ce tutoriel utile, n'hésitez pas à aimer la vidéo, vous abonner à la chaîne, et consultez notre plateforme CORIACE 💪 pour des formations complètes sur Webflow et le no code. Notre équipe est également disponible pour vous assister dans vos projets et répondre à toutes vos questions. Rejoignez-nous et démarrez votre aventure avec Webflow dès aujourd'hui !