Dernière mise à jour :
3/10/2024

Comment Ajouter un Smooth Scrolling (défilement doux) à un Site Internet Webflow

Apprenez comment ajouter un défilement fluide à votre site Webflow, pour un effet moderne de type inertie.

Aperçu 📚

Luxy.js est un effet de défilement d'inertie (également appelé effet de momentum) populaire qui fait que le défilement de vos sites ralentit progressivement pour s'arrêter au lieu de s'arrêter immédiatement. Cela peut être utilisé pour rendre l'expérience de défilement de vos sites plus fluide, mais c'est un effet stylisé qui ne doit pas être utilisé de manière excessive.

Pour intégrer cela dans votre projet, suivez les étapes simples et ajoutez le code personnalisé dans les paramètres de votre projet ou de votre page.

Instructions ✍️

1. Ajoutez le code personnalisé dans les paramètres de votre page.

Tout d'abord, vous voudrez ajouter le script à votre page ou aux paramètres de votre projet. Vous pouvez l'ajouter dans la section avant </body> de votre section de code.

<script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script>

<script charset="utf-8">  
 var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
 if (!isMobile) {
      luxy.init({
        wrapper: '#luxy',
        wrapperSpeed: 0.065,
       
    });
 }
 </script>

2. Ajoutez un bloc div qui enveloppe tous les éléments de votre page.

Ajoutez un bloc div à votre page et celui-ci sera utilisé pour envelopper (wrapper) tous nos éléments de page.

3. Assurez-vous que le bloc div a l'ID "#luxy".

Ajoutez l'ID #luxy au wrapper principale de votre page. Tous les éléments à l'intérieur du wrapper auront cet effet de défilement fluide.

4. Publiez et c'est gagné ! 🥇