ONZE/BLOGオンズ開発ブログ

指定した要素がブラウザの可視領域に入ったことを検出するJavaScriptのライブラリ［Emergence.js］を紹介します。

ブラウザをスクロールして、指定した要素が特定の範囲に入ったときにアニメーションを実行させることができる便利なプラグインです。

サンプルのデモサイトは以下より。

デモ : https://xtianmiller.github.io/emergence.js/

こちらのサンプルでは、丸、四角、三角の要素が、スクロールに伴ってピンク色の背景内に来ると、そのタイミングでアニメーションと共に拡大されるようになっています。
さらにスクロールしてピンク色の背景から外れると、今度は縮小して元のサイズに戻ることを確認できるはずです。

［Emergence.js］の実装方法

以下［Emergence.js］の実装方法を紹介していきます。

「emergence.min.js」を入手してウェブサイトに設置する

最初に必要なファイルをGitHubからダウンロードしてきましょう。

GitHub : https://github.com/xtianmiller/emergence.js

上記サイトより、「Clone or Download」→「Download ZIP」をクリックするとデータを入手できます。

使用するのは「emergence.min.js」というJavaScriptのファイルです。
これをHTMLの適当な箇所で読み込み、同時に初期化するためのコードも記述しましょう。

<script src="emergence.min.js"></script>
<script>emergence.init();</script>

まずはこれで準備完了です。

［Emergence.js］を効かせる要素を作る。

［Emergence.js］を働かせるための要素に、カスタムデータ属性で data-emergence="hidden" という値を付与します。

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

この要素がビューポートに入ると、カスタムデータ属性の data-emergence="hidden" の箇所が data-emergence="visible" に変わる仕組みになっています。
これを利用してスタイルシート側でアニメーションの処理を設定するワケですね。

.element[data-emergence=hidden] {
/* 指定した領域から外れたときの処理 */
	 opacity:0;
}

.element[data-emergence=visible] {
/* 指定した領域に入ったときの処理 */
	 opacity:1;
}

基本的にコレだけで実装できてしますので、非常に簡単です。

オプション設定

用意されているオプション設定の項目とデフォルトの値は次のようになっています。

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.');
		}
	}
});

指定領域は初期設定では「container:window」となっています。
これはブラウザの表示ウィンドウの大きさです。
これを変更して <div class="sample"> 〜 </div> という領域を指定したい場合は、次のように記述します。

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

emergence.init({
	 container: customContainer
});

あらかじめコールバックも用意されていて、アイデア次第でイロイロと便利な使い方ができそうですね。
jQueryなどに依存せず、単体で使えるのも嬉しいポイント。積極的に導入していきたいプラグインです。
ぜひお試しください。