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. Jquery-Slider

    JavaScript

    水平の画像タイムラインを実装できる「Jquery-Slider」

    Jquery-Sliderは水平の画像タイムラインを実装できるのが特徴…

  2. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

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

    JavaScript

    jQueryのeachと$.eachの簡単な使い方のメモ

    jQueryのeachと$.eachの使い方のメモです。あんまり深い知…

  4. popModal

    JavaScript

    6種類のモーダルウィンドウを実装できる「popModal」

    popModalは6種類のモーダルウィンドウを実装することができるjQ…

  5. JQuery Clock

    JavaScript

    シンプルなアナログ時計を実装できる「JQuery Clock」

    JQuery Clockはシンプルなアナログ時計を実装できます。画像を…

  6. formToWizard

    JavaScript

    ステップごとに入力可能なフォームを実装できる「formToWizard」

    formToWizardはステップごとに(ウィザード)入力可能なフォー…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP