パララックスやさまざまなスクロールのエフェクトを簡単に実装できるJavaScriptライブラリ -Locomotive Scroll
Post on:2019年7月24日
sponsors
Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。
要素をスクロールに追従して表示させたり、視差効果を使ったパララックスやカーテン効果なども簡単に実装できます。
Locomotive Scroll
Locomotive Scroll -GitHub
Locomotive Scrollの特徴
Locomotive ScrollはWebページやスマホアプリでビューポート内の要素検出と視差効果によるスムーズなスクロールを簡単に実装できるJavaScriptライブラリです。virtual-scrollにレイヤーとして構築され、要素がビューポート内に入った時にclassが起動し、視差効果と他の多くの機能で滑らかなスクロールを提供します。
MITライセンスで、商用のプロジェクトでも無料で利用できます。
視差効果と機能をいくつか紹介します。
各要素は異なるスピードでスクロールします。
各要素は異なる方向にスクロールします。
各要素は追従するようにスクロールします。
指定要素を固定し、カーテンのようにそれ以外は通常通りスクロールします。
Locomotive Scrollのデモ
デモでは、Locomotive Scrollのさまざまな機能を楽しめます。
※一部の機能はスマホに未対応です。
Locomotive Scrollの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 |
<script src="locomotive-scroll.min.js"></script> |
Step 2: HTML
対象となる要素に「data-scroll」を加え、スピードなどの機能を定義します。
|
1 2 |
<h1 data-scroll data-scroll-speed="1">Hello</h1> <p data-scroll data-scroll-speed="2">Text</p> |
Step 3: JavaScript
スクリプトを初期化し、実行します。
|
1 2 3 4 |
const scroll = new locomotiveScroll({ el: document.querySelector('#js-scroll'), smooth: true }); |
sponsors
