jQueryでURLやパラメータを取得する
ENOWL_Nao
ENOWL（エノウル）
初心者でも簡単！「Lenis」を使った慣性スクロールの導入ガイド
ENOWL_Nao
どうも、こんにちは。
Webデザイナーのなお（@ENOWL_Nao）です。
今回は、Webサイトに滑らかなスクロール効果を追加できるJavaScriptライブラリ「Lenis」を使って、慣性スクロールを実装する方法をご紹介します！
慣性スクロールとは、スクロールが終わっても余韻を残しながらゆっくり止まる動きのことです。
言葉だけでは説明しづらいので、実際に動きを確認してみてください。
スクロール後に少しだけ動いているのがわかりますか？
これが慣性スクロールです！
おしゃれなサイトなどでよく見かけますよね。
今回はこれを実装する方法をご紹介していきます！
この記事の見出し
「Lenis」のデモ
以下で実際の動きを確認してみてください。
※PCで見てもらう方が分かりやすいです。
「Lenis」とは何か
まずLenisについて簡単に説明させてください。
Lenisは、Webサイトに滑らかなスクロール効果を追加できる軽量なJavaScriptライブラリです。
これを使うことで、ユーザーがページをスクロールする際に自然で心地よい動きを実現できます。
慣性スクロールのメリット・デメリット
慣性スクロールのメリット
ページのスクロールが滑らかになることで、Webサイトを閲覧している時にリッチで上品な感じがします。
慣性スクロールのデメリット
スクロールの動きが遅すぎると、ユーザーがWebサイトを見づらいと感じる場合があります。
適度な速度を保つことが大切です。
「Lenis」の導入方法
HTMLファイルの準備
まずは、基本的なHTMLファイルを作成しましょう。
LenisをCDNを利用して読み込みます。
※デモを一部抜粋しています。デモのソースコードを見るのが一番分かりやすいと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lenisで慣性スクロールを実装</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Lenisで慣性スクロールを実装</h1>
</header>
<main>
<section>
<h2>セクション1</h2>
<p>コンテンツがここに入ります。</p>
</section>
<section>
<h2>セクション2</h2>
<p>コンテンツがここに入ります。</p>
</section>
</main>
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.19/bundled/lenis.min.js"></script>
<script src="script.js"></script>
</body>
</html>JavaScriptの基本設定
次に、JavaScriptファイル（script.js）を作成し、基本的な設定を行います。
以下のコードをscript.jsファイルに追加します。
document.addEventListener('DOMContentLoaded', function() {
const lenis = new Lenis();
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
});これで、基本的な設定が完了です！
Lenisのインスタンスを作成し、スクロールのアニメーションを設定しています。
次にちょっとしたカスタマイズの設定をご紹介します。
Lenisのカスタマイズ
スクロール速度や効果の調整
Lenisを使えば、スクロールの速度や効果をカスタマイズできます。
例えば、以下のように設定を変更することが可能です。
const lenis = new Lenis({
duration: 1.5 // スクロールの時間を1.5秒に設定
});このように設定することで、スクロールの速度を変えることができます。
試しにduration: 10に設定してみました。
かなりスクロールがゆっくりに感じると思います。
const lenis = new Lenis({
lerp: 0.1,
duration: 10,
});Lenisのよくあるエラーとその解決方法
Lenisを使っている際に直面するかもしれない一般的なエラーとその解決方法について説明します。
Lenisが動作しない
JavaScriptファイルが正しく読み込まれていない、またはLenisのインスタンスが正しく作成されていない可能性があります。
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.19/bundled/lenis.min.js"></script> ↑CDNから正しく読み込まれていますか？
const lenis = new Lenis({
lerp: 0.9,
});↑new Lenis({の箇所がnew lenis({などになっていると正しく動作しません。
※分かりづらいと思いますが、lenisのlが小文字になっています。
これらに当てはまらない場合は、コンソールにエラーメッセージが表示されていないか確認し、スクリプトタグの位置やJavaScriptコードを再確認してみてください！
スクロールがスムーズじゃない
スクロールの設定が適切じゃない可能性があります。
lerpというオプションはスクロールの補間係数で、0～1までの数値で設定することができます。
これが「0.9」とかに設定されていると、あまり慣性スクロール感がありません。
※デフォルトは「0.1」に設定されている。
試しにlerp: 0.9に設定したデモを用意したので、確認してみてください。
※ただし、durationを設定すると滑らかになります。この辺は適宜値を調整してみてください。
const lenis = new Lenis({
lerp: 0.9,
});まとめ
今回の記事では、Webサイトに滑らかなスクロール効果を追加するためのJavaScriptライブラリ「Lenis」をご紹介しました！
Lenisを使うことで、ページのスクロールが滑らかになり、サイトにリッチな高級感を出せます。
しかし、スピードが遅すぎると見づらくてもなってしまうので、注意して使用しましょう！
最後までお読みいただき、ありがとうございました！
ぜひ、試してみてくださいね！
個人事業主さまの「Web担当」そのWebの悩み
そのWebの悩み
一人で抱え込んでいませんか？
「ちょっとここを直したい」「そろそろリニューアルしたい」…。
小さな修正から本格的な制作まで、Webに関する「どうしよう」を私が丸ごと受け止めます。難しい専門用語は使いません。
あなたの事業を支えるパートナーとして、まずは気軽にお話ししませんか？
私について
ホームページをご覧いただきありがとうございます！
なおと申します。
現在はフリーランスのWebデザイナーとして活動しています。 WebデザインからコーディングからWordPress実装まで一貫してホームページ制作を行うことができます。
