【JavaScript】指定した要素がビューポートに表示されたことを[Emergence.js]で検出する。2.0【JavaScript】指定した要素がビューポートに表示されたことを[Emergence.js]で検出する。ONZEhttps://on-ze.com/archives/6911HomeBlog【JavaScript】指定した要素がビューポートに表示されたことを[Emergence.js]で検出する。Google指定した要素がブラウザの可視領域に入ったことを検出するJavaScriptのライブラリ[Emergence.js]を紹介します。ブラウザをスクロールして、指定した要素が特定の範囲に入ったときにアニメーションを実行させることができる便利なプラグインです。サンプルのデモサイトは以下より。https://xtianmiller.github.io/emergence.js/こちらのサンプルでは、丸、四角、三角の要素が、スクロールに伴ってピンク色の背景内に来ると、そのタイミングでアニメーションと共に拡大されるようになっています。スクロールしてピンク色の背景から外れると、今度は縮小して元のサイズに戻ることを確認できるはずです。以下[Emergence.js]の実装方法を紹介していきます。「emergence.min.js」を入手してウェブサイトに設置する最初に必要なファイルをGitHubからダウンロードしてきましょう。ZIP」をクリックするとデータを入手できます。使用するのは「emergence.min.js」というJavaScriptのファイルです。これをHTMLの適当な箇所で読み込み、同時に初期化するためのコードも記述しましょう。src="emergence.min.js"></script><script>emergence.init();</script>まずはこれで準備完了です。[Emergence.js]を効かせる要素を作る。変わる仕組みになっています。これを利用してスタイルシート側でアニメーションの処理を設定するワケですね。opacity:1;}基本的にコレだけで実装できてしますので、非常に簡単です。用意されているオプション設定の項目とデフォルトの値は次のようになっています。reset.');}}});指定領域は初期設定では「container:window」となっています。これはブラウザの表示ウィンドウの大きさです。いう領域を指定したい場合は、次のように記述します。customContainer});あらかじめコールバックも用意されていて、アイデア次第でイロイロと便利な使い方ができそうですね。jQueryなどに依存せず、単体で使えるのも嬉しいポイント。積極的に導入していきたいプラグインです。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comTwitterFacebookFeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【jQuery】これだけで完璧に導入できる[Lightbox]の実装方法。【JavaScript】フォームの進捗をシンプルなプログレスバーで表示するスクリプト[Fort.js]が便利です。【JavaScript】デバイスの傾きでページをスクロールさせる[Interdimensional]の使い方。【JavaScript】リストやテーブルにフィルタリングや検索機能を追加できる[List.js]が超絶便利です。【JavaScript】ウィンドウを閉じるリンクを実装する方法。