初心者エンジニア向け 業務に役立つデザインソフトの使い方!
BLOG
![](https://images.microcms-assets.io/assets/a825b67e3494487eb265986360c81314/11410d002199476086449e60607057b6/blog_thumb-uchida1.png)
ページをスクロールした時の動きを滑らかにし、スクロールした後の動きに余韻をもたせます。
Locomotive Scroll
Github:https://github.com/locomotivemtl/locomotive-scroll
公式サイト:https://locomotivemtl.github.io/locomotive-scroll/
GitHubからライブラリをダウンロードし、</body>
タグの直前でdist/
配下にあるlocomotive-scroll.min.js
を読み込みます。
<script src=“js/locomotive-scroll.min.js”></script>
npmからインストールしてくる場合は、以下のコマンドをターミナルで実行してください。
コマンド(npm)
npm i locomotive-scroll
同じくdist/
配下にあるlocomotive-scroll.min.css
をHTMLの<head>
内で読み込みます。こちらはLocomotive Scrollのベースのcssになります。
慣性スクロールをつけたい要素に、data-scroll-container
を指定します。
<div data-scroll-container>
...ここに慣性スクロールをつけたい要素を入れる。
</div>
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を使った慣性スクロールのサンプルです。