表示された要素の検出、操作が可能なプラグイン「Emergence.js」

はじめに

ビューポート等で要素が表示されたかを検出、操作できるJavascriptプラグイン「Emergence.js」をご紹介します。
HTML5のカスタムデータ属性を使用しており、単体で動作する上、超軽量です。

公式DEMOはこちら

使ってみる

まずダウンロード

こちらから

設置する

jsの読み込み

パスは適宜変えて下さい。

<script src="assets/js/emergence.min.js"></script>

検出する要素を設定

表示を検出したい要素に「data-emergence=”hidden”」を付与します。

<div class="element" data-emergence="hidden"></div>

jsを実行

<script>emergence.init();</script>

これでビューポートに指定の要素が表示された場合、「data-emergence=”hidden”」が「data-emergence=”visible”」に変化します。
それに合わせてCSSで下記のように記述すると、表示された場合にアニメーション等、動きをつけることが可能です。

.element[data-emergence=hidden] {
  /* 非表示の場合のスタイル */
}
.element[data-emergence=visible] {
  /* 表示されている場合のスタイル */
}

デフォルトではビューポートで検出されますが、オプションを使用することにより、指定の要素に変更したり、上下左右のオフセットをつける、モバイルデバイスでは動かないようにする等、カスタマイズすることも可能です。

デモ

デモを作成してみました。
オプションを使用し、上下にオフセットを入れています。

DEMO

さいごに

単体で動作するうえ、超軽量なので、ぜひ使って見て下さい。
アイデア次第では面白い動きが実装できそうです。
参考になればと思います。