パララックスやさまざまなスクロールのエフェクトを簡単に実装できるJavaScriptライブラリ -Locomotive Scroll

Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。

要素をスクロールに追従して表示させたり、視差効果を使ったパララックスやカーテン効果なども簡単に実装できます。

サイトのキャプチャ

Locomotive Scroll
Locomotive Scroll -GitHub

Locomotive Scrollの特徴

Locomotive ScrollはWebページやスマホアプリでビューポート内の要素検出と視差効果によるスムーズなスクロールを簡単に実装できるJavaScriptライブラリです。virtual-scrollにレイヤーとして構築され、要素がビューポート内に入った時にclassが起動し、視差効果と他の多くの機能で滑らかなスクロールを提供します。
MITライセンスで、商用のプロジェクトでも無料で利用できます。

視差効果と機能をいくつか紹介します。

サイトのキャプチャ

Speed Control

各要素は異なるスピードでスクロールします。

サイトのキャプチャ

Scroll Direction

各要素は異なる方向にスクロールします。

サイトのキャプチャ

Lerp Effect

各要素は追従するようにスクロールします。

サイトのキャプチャ

Fixed Elements

指定要素を固定し、カーテンのようにそれ以外は通常通りスクロールします。

Locomotive Scrollのデモ

デモでは、Locomotive Scrollのさまざまな機能を楽しめます。
※一部の機能はスマホに未対応です。

サイトのキャプチャ

デモページ

Locomotive Scrollの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

Step 2: HTML

対象となる要素に「data-scroll」を加え、スピードなどの機能を定義します。

Step 3: JavaScript

スクリプトを初期化し、実行します。

sponsors

top of page

©2019 coliss