[JS]縦長ページのスクロールエフェクトはこれが使いやすい!ビューポートをトリガーにしたスクリプト -in-view.js

ページをスクロールして、要素が表示された時にアニメーションを適用するエフェクトは非常に人気が高いですね。

要素がビューポートに入った時、そして出る時にそれぞれアニメーションを適用できる他のスクリプトに依存なし、超軽量(1.9kb gzip)のスクリプトを紹介します。
すべてのモダンブラウザとIE9+をサポートしており、現環境ほとんどで利用できます。

サイトのキャプチャ

in-view.js -GitHub

in-view.jsのデモ

デモは非常にシンプルで、ビューポートに要素が入った時と出る時にそれぞれアニメーションが適用されます。
アニメーションは入った度と出る度ごとに適用することも、一度だけ適用することもできます。

サイトのキャプチャ

デモページ

トリガーはビューポート内での有無のため、マウス操作でもキーボード操作でも動作します。またビューポートのサイズを変更しても快適に、動作します。

in-view.jsの使い方

Step 1: 外部ファイル

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

Step 2: HTML

HTMLは通常の実装に、要素を指定できるようclassやidを加えておきます。

Step 3: JavaScript

対象となる要素を指定し、ビューポートに入った時(enter)と出る時(exit)にエフェクトを記述します。

スクロールを繰り返した時に、その度にエフェクトを表示する時は「on」を使います。

繰り返しではなく、一度だけの時は「once」を使います。

スクリプトのオプションでは他に、要素がビューポートにあるかどうかの判定、オフセットの変更、Windowのスクロール・リサイズ・ロードのイベントの判定などにも対応しています。

top of page

©2017 coliss