Contrôler la vitesse du scroll pour une navigation plus fluide

Pourquoi créer un scroll plus doux ?

Créer une navigation intuitive et agréable

• Le défilement doux rend la navigation sur un site web plus fluide et naturelle. Cela aide à créer une expérience utilisateur agréable, réduisant les saccades et les mouvements brusques qui peuvent être désagréables ou déroutants.
• Un défilement doux peut particulièrement améliorer l'expérience sur des sites avec de longues pages. Il offre une transition plus naturelle entre les sections du site.

Améliorer de la compréhension du contenu

• Un smooth scroll bien géré aide les utilisateurs à mieux comprendre le flux du contenu. Lorsque le défilement est trop rapide ou imprévisible, il peut être difficile pour les utilisateurs de suivre le contenu ou de se concentrer sur des points spécifiques.
• Cela est particulièrement utile pour des sites qui utilisent des animations ou des interactions basées sur le défilement. Le défilement doux assure que ces éléments sont déclenchés de manière fluide et compréhensible.

Réduire de la fatigue visuelle : penser au confort de vos visiteurs !

• Un défilement abrupt ou saccadé peut provoquer une fatigue visuelle, surtout lors de longues sessions de navigation. Le smooth scroll réduit cette fatigue en fournissant une expérience de défilement plus douce.
• Cela est bénéfique pour améliorer le confort général de l'utilisateur, en particulier pour ceux qui sont sensibles aux mouvements rapides à l'écran ou qui ont des difficultés de concentration.

Comment contrôler le scroll ?

Webflow offre une fonctionnalité puissante "Interactions" qui permet de créer des animations et des effets visuels basés sur le défilement, sans nécessiter de connaissances en codage JavaScript : "scroll in view", "scroll into view" etc. surlesquelle on peut ajuster l'option smooth (définie à 50% par défaut)

Pour avoir plus de contrôle sur le comportement de défilement (scroll) dans votre projet Webflow, vous pouvez utiliser du CSS personnalisé et du JavaScript.

Si vous avez mis en place une navigation avec des ancres vous pouvez aussi avoir le contrôle sur le comportement du scroll automatique.

Locomotive Scroll

On va intégrer la librairie Locomotive Scroll. L'objectif est de créer un scroll doux qui ralentit progressivement et ne s'arrête pas brutalement.

1. Téléchargez le lien CDN de Locomotive Scroll : assurez-vous de bien prendre la dernière version.

2. Copier le lien CDN juste avant la fermeture de votre balise </body> pour assurer un chargement optimal de la page.‍‍

 <script>
src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js">
</script>

3. Initialisez Locomotive Scroll et attribuer la classe "data-scroll-container" à la div "page_wrapper" des pages de votre projet Webflow

 <script>
 document.addEventListener('DOMContentLoaded', () => {
    const scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      smooth: true
    });
  });
</script>

On peut jouer avec l'option "multiplier" facteur qui permet d'augmenter ou de réduire la vitesse de défilement.

Pour découvrir toutes les possibilités de Locomotive Scroll : locomotive.

‍