Implémenter le Défilement Fluide avec Locomotive

Locomotive Scroll transforme le défilement standard en une expérience fluide et cinématographique. Voici comment le configurer.

Installation

Installez via npm :

npm install locomotive-scroll

Configuration de Base

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  multiplier: 1,
  lerp: 0.1
});

Structure HTML

<main data-scroll-container>
  <section data-scroll-section>
    <h1 data-scroll data-scroll-speed="2">Élément Rapide</h1>
    <p data-scroll data-scroll-speed="0.5">Élément Lent</p>
  </section>
</main>

Options Clés

Vitesse

Différentes vitesses créent des effets de parallaxe :

• Valeurs > 1 : Plus rapide que le défilement
• Valeurs < 1 : Plus lent que le défilement
• Valeurs négatives : Direction opposée

Direction

<div data-scroll data-scroll-direction="horizontal">
  Bouge horizontalement pendant le défilement vertical
</div>

Intégration avec React

useEffect(() => {
  const scroll = new LocomotiveScroll({
    el: containerRef.current,
    smooth: true
  });
  
  return () => scroll.destroy();
}, []);

Pièges Courants

• Mettez à jour le scroll après les changements de contenu
• Gérez les événements de redimensionnement
• Considérez les préférences de mouvement réduit
• Le mobile peut nécessiter un défilement natif

Conclusion

Locomotive Scroll élève l'expérience de navigation. Utilisez-le sur des sites portfolio et des pages de storytelling où le défilement fluide améliore la narration.