滑らかな慣性スクロールをlenis.jsを使ってお手軽に導入する方法
今回は、Webサイトに滑らかな慣性スクロールを実装する方法を紹介します。慣性スクロールを実装することで、他のサイトよりも滑らかに余韻が残るような印象を与えることができます。
Lenis.jsとは？
Lenis.js は、Webページのスクロールを滑らかにするための軽量なJavaScriptライブラリです。デフォルトのブラウザスクロールをカスタマイズし、慣性のある自然なスクロール体験を提供します。通常のスクロール処理を超えて、ページ全体のユーザーエクスペリエンスを向上させたいときにおすすめです。
Lenis.jsの導入方法
Lenis.jsのインストール
npmを使用してインストールします。
npm i lenis
CDNを使用する場合はこちら
<script src="https://unpkg.com/[email protected]/dist/lenis.min.js"></script>
基本的な実装
以下のコードで、シンプルな慣性スクロールを実装できます。
import Lenis from 'lenis'
import 'lenis/dist/lenis.css'
// Lenisを初期化
const lenis = new Lenis()
// スクロールイベントをリッスンしてイベントデータをログに出力
lenis.on('scroll', (e) => {
console.log(e)
})
// requestAnimationFrameを使用してスクロールを継続的に更新
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
これだけで慣性スクロールが実装できます。
オプション設定
Lenis.jsは多くのオプションを提供しているため、ニーズに合わせてカスタマイズできます。
| オプション | 説明 |
|---|---|
| duration | 慣性スクロールの持続時間（秒） |
| easing | スクロールの加速・減速を調整するイージング |
| smoothWheel | マウスホイールのスクロールを滑らかにする |
| smoothTouch | タッチスクロールを滑らかにする |
例えば、モバイルでの滑らかなタッチスクロールを有効にする場合は次のように設定します。
const lenis = new Lenis({
smoothTouch: true,
duration: 1.5
})
LenisのGithubページではほかにもいろいろなプロパティやメソッドなどが紹介されているので興味がある人は見てみてください。
GSAP（GreenSock）との連携
lenis.jsはgsapとの相性がよく、組み合わせることで、滑らかなスクロールアニメーションを実現できます。特にScrollTriggerと組み合わせることで、スクロール連動のアニメーションが実装可能です。
下記のサンプルではフェードイン、パララックス、水平スクロールを実装しています。
慣性スクロールを実装する場合の注意点
パフォーマンスの考慮
- 重いDOM操作や画像読み込みがある場合、スクロールのパフォーマンスに影響を与える可能性があります。
- 必要に応じてrequestAnimationFrameの呼び出し頻度を調整することを検討してください。
モバイル対応
- モバイルデバイスでは
smoothTouch: falseに設定することを推奨しています。 - タッチデバイスではネイティブのスクロール動作の方が自然に感じられることが多いためです。
まとめ
Lenis.jsを使用することで、比較的簡単に高品質な慣性スクロールを実装することができます。ただし、以下の点に注意して実装しましょう。
- パフォーマンスへの影響を考慮する
- モバイルデバイスでの挙動を適切に設定する
- アクセシビリティに配慮する
これらの点に気をつけることで、ユーザー体験を損なうことなく、魅力的な慣性スクロールを実装することができます。