【JavaScript】Lenisでふんわりスムーズなスクロールを実現する方法

はじめに

Webサイトで「ふんわりとしたスムーズなスクロール」を実現したいとき、JavaScriptライブラリLenisを使用すると、簡単にスムーズなスクロール効果を実装できます。この記事では、Lenisを使用した実装手順を解説します。

Lenisとは？

Lenisは、軽量かつパフォーマンスに優れたスムーズスクロールのライブラリです。
ステキなWebサイト等をまとめた、Webデザインギャラリーサイトに掲載されているWebサイトの大半で使われているのではないでしょうか？

実装方法

Lenisを使って、ページ全体にスムーズなスクロール効果を適用します。
実装は簡単です！

1.Lenisをインストール

パッケージマネージャーを使用する場合

プロジェクトにインストールし、

npm i lenis

JavaScriptのファイル内でimportします。

import Lenis from 'lenis'

 

スクリプトを使用する場合

HTMLにスクリプトタグを読み込みます。

<script src="https://unpkg.com/lenis@1.1.18/dist/lenis.min.js"></script> 

 

2.基本の設定スクリプトを、script.js等に記述

// Initialize Lenis
const lenis = new Lenis({
  autoRaf: true,
});

// Listen for the scroll event and log the event data
lenis.on('scroll', (e) => {
  console.log(e);
});

これだけで、完成です！

試しに、CO-WRITEに導入してみました。
スルッと滑らかにスクロールされています。

まとめ

Lenisを使えば、スムーズなスクロールを簡単に実現することができました！
次は、LenisとGSAP ScrollTriggerを組み合わせて、スクロールに応じたアニメーションを実装してみたいと思います。

 

参考サイト

こちらのサイトを参考にさせていただきました。

 

• WEB
• Tips
• 技術情報