LAB

慣性スクロール(LOCOMOTIVE SCROLL)

Written by nakata

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
});

サンプル

Locomotive Scrollを使った慣性スクロールのサンプルです。

参考文献

PREV

LAB一覧

NEXT

最新記事 Latest