SAMPLE
慣性スクロール(LOCOMOTIVE SCROLL)
INDEX
説明
ページをスクロールした時の動きを滑らかにし、スクロールした後の動きに余韻をもたせます。
使用するライブラリ
Locomotive Scroll
Github：https://github.com/locomotivemtl/locomotive-scroll
公式サイト：https://locomotivemtl.github.io/locomotive-scroll/
手順
手順1
GitHubからライブラリをダウンロードし、</body>タグの直前でdist/配下にあるlocomotive-scroll.min.jsを読み込みます。
コード
<script src=“js/locomotive-scroll.min.js”></script>
npmからインストールしてくる場合は、以下のコマンドをターミナルで実行してください。
コマンド(npm)
npm i locomotive-scroll
手順2
同じくdist/配下にあるlocomotive-scroll.min.cssをHTMLの<head>内で読み込みます。こちらはLocomotive Scrollのベースのcssになります。
手順3
慣性スクロールをつけたい要素に、data-scroll-containerを指定します。
<div data-scroll-container>
...ここに慣性スクロールをつけたい要素を入れる。
</div>
手順4
JavaScriptファイルを作成し、Locomotive-scrollのインスタンスを生成するためのコードを記述します。npmの場合はファイルの冒頭でLocomotive-scorollをimportするようにしてください。
// npmの場合
import LocomotiveScroll from 'locomotive-scroll';
const scroll = new locomotiveScroll({
el: document.querySelector(‘[data-scroll-container]’),
smooth: true
});
