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

サイト構築 -JavaScript

Post on:2017年11月9日

Emergence.jsのデモ

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

デモページ

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

デモのアニメーション

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

Emergence.jsの使い方

Step 1: 外部ファイル

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

<body>
  ...
  コンテンツ
  ...
<script src="path/to/emergence.min.js"></script>
<script>
  emergence.init();
</script>
</body>

<body>

...

コンテンツ

...

emergence.init();

</script>

</body>

Step 2: HTML

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

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

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

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

.element[data-emergence=hidden] {
  /* Hidden state */
}
.element[data-emergence=visible] {
  /* Visible state */
}

.element[data-emergence=hidden] {

/* Hidden state */

}

.element[data-emergence=visible] {

/* Visible state */

}

オプション

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

var customContainer = document.querySelector('.wrapper');

emergence.init({
  container: customContainer
});

var customContainer = document.querySelector('.wrapper');

emergence.init({

container: customContainer

});

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

emergence.init({
  container: window,
  reset: true,
  handheld: true,
  throttle: 250,
  elemCushion: 0.15,
  offsetTop: 0,
  offsetRight: 0,
  offsetBottom: 0,
  offsetLeft: 0,
  callback: function(element, state) {
    if (state === 'visible') {
      console.log('Element is visible.');
    } else if (state === 'reset') {
      console.log('Element is hidden with reset.');
    } else if (state === 'noreset') {
      console.log('Element is hidden with NO reset.');
    }
  }
});