Emergence.js

JavaScript

ブラウザで要素の可視性を検出する「Emergence.js」

Emergence.jsは、ブラウザで要素の可視性を検出することができる軽量のJSプラグインです。要素がスクロールで特定の範囲にくると、そのポイントでアニメーションを実行したりなんてことができちゃいます。応用度も高く、いろんな用途に使えそうですね。似たようなものでは、以前紹介したscrollMonitorなんかがそうですね。

Emergence.js

デモ

デモページでは丸や三角などの要素がたくさん表示されており、スクロールすることで特定の範囲の位置にくると拡大するようになっています。そして、そのままスクロールしてその位置から外れると縮小して元のサイズに戻ります。

ちなみにデモではピンク色の部分がその範囲になります。ここに要素が入ったかどうかを検出してくれるというわけです。

要素には「data-emergence=”hidden”」という値を与えてあげます。そして特定の範囲に入るとhiddenの部分がvisibleに切り替わる仕組みです。

このほか、オプションもたくさん用意されているのでカスタマイズ性も良好です。主なオプションは、container、reset、handheld、throttle、elemCushion、offsetTop、offsetRight、offsetBottom、offsetLeftです。また、コールバック関数を指定することもできます。

依存性もなく1KB(圧縮版)と軽量、そしてIE8とすべてのモダンブラウザに対応しているのも大きな魅力ポイントですね。

Emergence.js

関連記事

  1. JavaScript

    jQueryで好きな要素を浮遊させることができるプラグイン「jqFloat」を使ってみた

    指定した要素をフワフワと浮遊させることができる面白いプラグインを使って…

  2. Squishy

    JavaScript

    テキストをコンテナに合わせて自動でサイズ変更してくれるjQueryプラグイン「Squishy」

    SquishyというjQueryプラグインを使えばテキストをコンテナに…

  3. Add To Cart Interaction
  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで$.inArrayを使えば配列の中に指定した値が何番目に入ってるか知ることができる

    jQueryで配列の中に自分が指定した値が何番目にあるか知りたい場合は…

  5. Expandy Menu

    JavaScript

    マウスオーバーで広がるメニューパネル「Expandy Menu」

    Expandy Menuはマウスオーバーすると横に広がるメニューパネル…

  6. JavaScript

    レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い…

    レスポンシブにも対応している人気のjQueryプラグイン「Nivo S…

最近の記事

  1. Anker PowerCore Lite 20000
  2. ネクスタイム
  3. フォールドオーバーポーチ
  4. 田沢湖
  5. ハクバ シリコンクロス

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP