Défilement fluide d’une page web

Dans ce guide, je vous montre comment avoir un défilement fluide sur un site web en installant Leni, une librairie JavaScript légère et performante, directement dans Elementor.

Qu’est-ce que Lenis ?

Lenis est une librairie open-source développée par Studio Freight.
Elle permet de remplacer le scroll classique par un défilement doux et contrôlé, tout en conservant la compatibilité avec vos animations et le SEO.

👉 Avantages :

• Défilement fluide et constant.
• Contrôle de la vitesse et des effets d’inertie.
• Compatible avec GSAP, Locomotive Scroll et la plupart des scripts d’animation.
• Très simple à mettre en place.

Où placer le code dans Elementor

1. Dans le tableau de bord WordPress, allez dans Elementor → Code personnalisé.
2. Cliquez sur Ajouter un nouveau.
3. Nommez-le par exemple “Scroll fluide Lenis”.
4. Collez le code ci-dessous.
5. Réglez l’emplacement sur Body – End (important).
6. Publiez.

Code complet à ajouter

<!-- Script Lenis -->
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@0.2.28/bundled/lenis.js"></script>

<script>
const lenis = new Lenis({
  duration: 1.2, // Durée de l'animation (plus grand = plus lent)
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // Courbe d'accélération/décélération
  direction: 'vertical', // Sens du défilement : vertical ou horizontal
  gestureDirection: 'vertical', // Détection du geste : vertical, horizontal ou les deux
  smooth: true, // Active le scroll fluide
  mouseMultiplier: 1, // Vitesse du scroll souris
  smoothTouch: false, // Désactive le scroll fluide sur mobile par défaut
  touchMultiplier: 2, // Vitesse du scroll tactile
  infinite: false, // Défilement infini désactivé
});

// Debug (optionnel) : permet de voir les données du scroll dans la console
lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
  console.log({ scroll, limit, velocity, direction, progress });
});

// Boucle d’animation
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
</script>

Correction des conflits (optionnel)

Parfois, Elementor ou certains thèmes activent déjà un scroll fluide natif, ce qui peut provoquer des bugs (latence, retour en arrière du scroll).
Pour éviter ça, ajoutez ce petit correctif CSS :

<style>
html {
  scroll-behavior: auto !important; /* Désactive le scroll fluide natif du navigateur/Elementor */
}
</style>

Ajoutez-le aussi dans Code personnalisé → Body – End (après le script Lenis).

Réglages importants

• Vitesse du scroll (duration)
  • 1.2 = doux et fluide.
  • 0.8 = plus rapide.
  • 2.0 = très lent et élégant.
• Mobile (smoothTouch)
  • false = défilement natif (recommandé pour éviter de casser le tactile).
  • true = active le scroll fluide aussi sur mobile.
• Easing (transition)
  • La formule par défaut donne un effet naturel.
  • Vous pouvez tester avec t => t (linéaire) ou t => Math.pow(t, 0.7) pour un effet plus nerveux.

Bonnes pratiques

✅ Testez sur mobile : parfois le scroll fluide peut gêner l’expérience tactile.
✅ Surveillez vos animations (par ex. Lottie, GSAP, ScrollTrigger) : Lenis est compatible mais il faut parfois synchroniser les animations avec lenis.raf().
✅ Vérifiez les performances : sur des pages très longues, augmentez un peu la valeur de duration pour plus de confort.

Exemple concret

• Avant Lenis : le scroll saccade, surtout sur des sections longues avec images.
• Après Lenis : le défilement devient fluide, avec une légère inertie. Cela donne une impression haut de gamme, proche d’un site vitrine premium.

Conclusion

Grâce à Lenis, vous pouvez transformer instantanément l’expérience utilisateur de votre site Elementor.
Quelques lignes de code suffisent pour obtenir un scroll fluide, moderne et performant.

👉 En résumé :

• Ajoutez le code dans Elementor → Code personnalisé (Body – End).
• Ajustez duration et smoothTouch selon vos besoins.
• Ajoutez le correctif CSS si vous rencontrez des bugs.