ふわっとスクロールを実現!2つの記述で超簡単にLenis.jsを使う方法

2024.08.19 11:00 ブログ javascript web制作

ふわっとスクロールを実現!2つの記述で超簡単にLenis.jsを使う方法の画像

導入方法&使い方

早速ですが、まずは導入方法&使い方を説明していきます。

Lenis.jsを使ったふわっとスクロールの実装には、主に2つの方法があります。

 
  1. パッケージマネージャーを使う
  2. スクリプトタグを記述して使う

今回は、簡単に始められる「スクリプトタグを記述して使う」方法をご紹介します。

スクリプトタグをHTMLに追加する

 
1.スクリプトタグの追加

HTMLファイルのタグの直前に、以下のスクリプトタグを追加します。

    

スクリプトタグをタグの直前に配置する理由は、ページの読み込みが完了してからスクリプトが実行されるため、ページの表示が遅くなることを防ぐためです。この位置に記述することで、ページのコンテンツが優先的に読み込まれ、ユーザーの体験がスムーズになります。

 
2.スクリプトの実装

スクリプトタグの追加が完了したら、次にLenis.jsを使ったスクリプトを記述します。以下のコードを追加してください。

  
    const lenis = new Lenis();

    function raf(time) {
        lenis.raf(time);
        requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf);
  

このスクリプトでは、Lenisのインスタンスを作成し、requestAnimationFrameを使ってアニメーションを滑らかに保っています。

 
3.実装例

このようになっていればOKです。ブラウザ上でスクロールしてみてください。スクロールがふわっと滑らかに動くことを確認できるはずです。


 
 
 

慣性スクロールを使用する際に意識したいこと

慣性スクロールは、ウェブサイトやアプリケーションに滑らかで心地良いスクロール体験を提供しますが、いくつかの注意点を考慮することが大切です。

1.動く量や速さに注意する

スクロールの動きが大きすぎたり速すぎたりすると、ユーザーがコンテンツを把握しづらくなり、逆にストレスを感じることがあります。画面が過剰に動くと、視覚的な混乱を引き起こす可能性があります。

2.ほんのり動くくらいが上品で心地いい

慣性スクロールの効果は、ほんのりとした動きが最も心地よいです。適度にスムーズで上品な動きを心がけることで、ユーザーにとって快適な体験を提供できます。微細な動きが、全体のデザインやコンテンツとの調和を保ちます。

3.スクロールの速度と加速度を調整する

スクロールの速度や加速度が適切でないと、ユーザーの操作感に影響を与える可能性があります。特にスクロールの加速度が強すぎると、急激な動きが発生し、ユーザーに不快感を与えることがあります。スムーズで自然な動きを実現するために、これらのパラメータを慎重に調整することが重要です。より繊細な設定を行うには、こちらのGitHubページを参考にしてください。

4.スクロールの挙動が他のデザイン要素と調和しているか確認する

慣性スクロールの動きが他のデザイン要素(例えば、アニメーションやレイアウト)と調和していることを確認してください。スクロールの動きが目立ちすぎたり、逆に全く目立たない場合は、全体のユーザー体験に影響を与える可能性があります。

5.モバイルデバイスでのテストを行う

モバイルデバイスでの慣性スクロールの体験は、デスクトップとは異なる場合があります。特にタッチ操作のあるモバイルデバイスでは、スクロールの挙動が重要です。さまざまなデバイスでテストを行い、すべての環境で快適な体験を提供できるようにしましょう。

まとめ

ふわっとしたスクロールの動きを実現する、Lenis.jsの簡単な使い方を紹介してみました!
このライブラリを使えば、手軽に滑らかなスクロール体験を提供できます。ぜひ、実際のプロジェクトで試してみてください。
ブラウザでの動作確認もお忘れなく!

無料相談・お問い合わせ Web制作・システム開発に関する
ご相談はこちらよりご連絡ください。

お客様のビジネスの成長と成功を支えるパートナーとして、
どんなご相談でもお待ちしております。お気軽にお問い合わせください。