[JS]要素がビューポートや指定した範囲に表示されたか判定する超軽量スクリプト -Emergence.js

ページをスクロールして、指定した要素がビューポートに表示されたかを判定し、アニメーションなどを適用できる超軽量のスクリプトを紹介します。
ビューポートだけでなく、範囲を指定することもできるので、かなり面白いと思います。

単体で動作し、しかも1KBの超軽量スクリプトです。

サイトのキャプチャ

Emergence.js
Emergence.js -GitHub

Emergence.jsのデモ

デモでは、ピンクの矩形エリアに要素が表示されると変化します。

デモのキャプチャ

デモページ

動きが分かるよう、ゆっくりのアニメーションGIFにしてみました。

デモのアニメーション

デモのアニメーション

素早く、しかも大量にスクロールすると、もっと気持ちよく動作します。

Emergence.jsの使い方

Step 1: 外部ファイル

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

Step 2: HTML

適用する要素に「data-emergence="hidden"」を与えます。

要素がビューポート内で可視になると、属性はdata-emergence="visible"に変わります。このclassを使用して、要素をアニメーションなどで変化させることができます。

オプション

コンテナはデフォルトで、ビューポートのサイズになります。ビューポート内の指定した範囲を選択したい場合は、下記のように指定します。

コンテナを含め、オプションのデフォルトでは下記のように設定されています。

top of page

©2017 coliss