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. pagePiling.js

    JavaScript

    垂直にスライドするようなスクロールを実装できるjQueryプラグイン「pagePiling.js」

    pagePiling.jsは垂直にスライドするようなスクロール機能を実…

  2. jQuery Page

    JavaScript

    モバイルに最適なスライドやフリップを実装できる「jQuery Page」

    jQuery Pageは、スマホなどモバイルに最適なスライドやフリップ…

  3. no-image

    JavaScript

    シンプル・軽量なアナログ時計を実装できる「jsRapClock」

    jsRapClockはシンプルで軽量なアナログ時計を実装できるjQue…

  4. HR Navigation Responsive Menu
  5. Swipebox

    JavaScript

    スマホやタブレットのスワイプにも対応したLightboxを実装できるjQueryプラグイン「Swip…

    今後かなり需要がありそうなjQueryプラグインがあったので使い方も兼…

  6. 3D Cube CountDown script

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP