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

no-imageグリッドアイテムがスケールアップする「Expanding Grid Item Animation」前のページ

シンプルでスタイリッシュなサイドナビゲーション「simpler-sidebar」次のページsimpler-sidebar

関連記事

  1. lightgallery.js
  2. JavaScript

    円グラフ/折れ線グラフ/棒グラフを簡単に作れるjQueryプラグイン「Peity」

    個人的にかなり便利なプラグインを発見しました。円グラフ、折れ線グラフ、…

  3. CardTabs

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

  4. Responsive 3d Fold Scroll
  5. Folder Preview Ideas

    JavaScript

    フォルダに楽しいホバーアニメーションをつける「Folder Preview Ideas」

    Folder Preview Ideasは、フォルダにさまざまな楽しい…

  6. FancySelect

    JavaScript

    セレクトメニューをスタイリッシュに実装できるjQueryプラグイン「FancySelect」

    セレクトメニューをシンプルでスタイリッシュに実装することができるjQu…

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP