Emergence.jsは、ブラウザで要素の可視性を検出することができる軽量のJSプラグインです。要素がスクロールで特定の範囲にくると、そのポイントでアニメーションを実行したりなんてことができちゃいます。応用度も高く、いろんな用途に使えそうですね。似たようなものでは、以前紹介したscrollMonitorなんかがそうですね。
Emergence.js
以下、Emergence.jsの実際のデモページです。
デモページでは丸や三角などの要素がたくさん表示されており、スクロールすることで特定の範囲の位置にくると拡大するようになっています。そして、そのままスクロールしてその位置から外れると縮小して元のサイズに戻ります。
ちなみにデモではピンク色の部分がその範囲になります。ここに要素が入ったかどうかを検出してくれるというわけです。
要素には「data-emergence=”hidden”」という値を与えてあげます。そして特定の範囲に入るとhiddenの部分がvisibleに切り替わる仕組みです。
このほか、オプションもたくさん用意されているのでカスタマイズ性も良好です。主なオプションは、container、reset、handheld、throttle、elemCushion、offsetTop、offsetRight、offsetBottom、offsetLeftです。また、コールバック関数を指定することもできます。
依存性もなく1KB（圧縮版）と軽量、そしてIE8とすべてのモダンブラウザに対応しているのも大きな魅力ポイントですね。
要素の可視性を検出してアニメーションなどを実行させたいという人は、ぜひ「Emergence.js」を活用されてみてはいかがでしょうか？ Emergence.jsの具体的な使い方やダウンロードは以下のページからどうぞ。
