Code pour une utilisation sur site internet de Lenis Scroll
Fluidifie ton site au scroll avec Lenis
Développeur basé à Bordeaux, je partage ici un extrait de code pratique pour intégrer l’effet de défilement fluide Lenis à votre site internet. Que vous soyez en train de créer un site vitrine, un portfolio ou une boutique en ligne, ce script améliore l’expérience utilisateur grâce à un scroll élégant et performant. Retrouvez le code complet directement sur mon site, ainsi que d’autres ressources utiles pour les développeurs web.
Pour wordpress
function enqueue_lenis_cdn_header() {
// Charger Lenis depuis le CDN
wp_enqueue_script(
'lenis',
'https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.13/bundled/lenis.min.js',
array(),
'1.0.13',
false
);
// Ajout de code inline pour initialiser Lenis
wp_add_inline_script(
'lenis',
"document.addEventListener('DOMContentLoaded', function() {
const lenis = new Lenis({
smoothWheel: true, // Utilisez smoothWheel au lieu de smooth
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
});"
);
}
add_action('wp_enqueue_scripts', 'enqueue_lenis_cdn_header');
HTML
<script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.13/bundled/lenis.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const lenis = new Lenis({
smoothWheel: true // Active le smooth scroll avec la molette
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
});
</script>
