Emergence.js 要素の可視性を検出するための JS プラグイン-jsチュートリアル-php.cn

Emergence.js 要素の可視性を検出するための JS プラグイン

小云云

リリース： 2018-01-18 11:26:24

オリジナル

1441 人が閲覧しました

この記事では主にEmergence.jsを使って要素の可視性を検出するjsプラグインを紹介しています。また、Emergence.jsのインストールと使い方についても詳しく紹介していますので、興味のある方はぜひご覧ください。 . 皆さんのお役に立てれば幸いです。

Emergence.js は、ブラウザー内の要素を検出および操作するための軽量で高性能な JS プラグインです。

このプラグインは、ブラウザーでの表示/非表示に基づいて要素を操作できるように設計されています。これにより、開発者は独自の CSS または JS を自由に使用して、アニメーションや状態の変化を表示できるようになります。クラスの代わりに HTML5 データ属性を利用して開発を簡素化します。 Emergence.js は、この種のプラグインの中で最も軽量で最も互換性のあるプラグインの 1 つです。

emergence.jsの特徴

他のコンポーネントに依存する必要はありません
IE8+とすべての最新ブラウザをサポート
圧縮後わずか1kb

インストール

Emergence.js取り付けはとても簡単です。 npmのインストール方法は以下の通りです

npm install emergence.js

ログイン後にコピー

また、直接ダウンロードしてHTMLファイルにEmergence.jsを導入することも可能です。

<script src="path/to/emergence.min.js"></script>
<script>
 emergence.init();
</script>

ログイン後にコピー

使い方

表示したい要素にdata-emergence="hidden"を追加します:

< p class = “ element ” data-emergence = “ hidden ” > </ p >

ログイン後にコピー

要素がビューポート内に表示されると、属性はデータになります -出現 = "可視" 。 CSS を利用して要素をアニメーション化できるようになりました:

.element [ data-emergence = hidden ] {
 / *隐藏状态* /
}
.element [ data-emergence = visible ] {
 / *可见状态* / 
}

ログイン後にコピー

カスタマイズオプション

Emergence.js にはカスタマイズするためのオプションが多数あります。デフォルト値は次のとおりです:

emergence.init({
 container: window,
 reset: true,
 handheld: true,
 throttle: 250,
 elemCushion: 0.15,
 offsetTop: 0,
 offsetRight: 0,
 offsetBottom: 0,
 offsetLeft: 0,
 callback: function(element, state) {
 if (state === &#39;visible&#39;) {
  console.log(&#39;Element is visible.&#39;);
 } else if (state === &#39;reset&#39;) {
  console.log(&#39;Element is hidden with reset.&#39;);
 } else if (state === &#39;noreset&#39;) {
  console.log(&#39;Element is hidden with NO reset.&#39;);
 }
 }
});

ログイン後にコピー

オプション説明

container: コンテナ。デフォルトでは、要素の可視性はウィンドウのビューポートの寸法と X/Y スクロール位置 (ウィンドウに設定) によって決まります。ただし、カスタムコンテナに変更することはできます。例:

var customContainer = document.querySelector(&#39;.wrapper&#39;);
// www.xttblog.com
emergence.init({
 container: customContainer
});

ログイン後にコピー

Throttle: は、イベントのスクロールとサイズ変更に関連するパフォーマンスの問題を防ぐ方法です。スロットルは小さなタイムアウトを作成し、イベント中に一定のミリ秒ごとに要素の可視性を着実にチェックします。デフォルトは 250 です。

reset: データ属性の状態を表示後にリセットするかどうかを決定します。ビューポートを離れた後も要素の表示状態を維持したい場合は、これを false にリセットします。デフォルトは true です。

ハンドヘルド: Emergence は、電話やタブレットなどのほとんどのハンドヘルドデバイスモデルをチェックします。 false に設定すると、プラグインはこれらのデバイスでは実行されません。デフォルトは true です。

elemCushion: 要素の座標は、ビューポート内で「表示」する必要がある要素の数を決定します。値 0.5 は、表示する必要がある要素の 50% に相当します。デフォルトは 0.15 です。

offsetTop、offsetRight、offsetBottom、offsetLeft: ビューポートの任意の側にオフセット (ピクセル単位) を指定します。これは、ヘッダーの高さと同じ値でオフセットできる固定コンポーネント (ヘッダーなど) がある場合に便利です。 offsetTop に値 100 を適用すると、要素はビューポートの上部から 100 ピクセルより大きい場合にのみ表示されると見なされます。デフォルト値はすべて 0 です。

callback: 要素がいつ表示、非表示、リセットされるかを決定するコールバックを提供するために使用されます。可能な状態は、visible、reset、noreset です。

さらに、Emergence.js には、emergence.engage(); と emergence.disengage(); という 2 つの高度なメソッドも提供されています。これらの関数はまったく逆です。

Emergence.js は次のブラウザ API に依存しています: querySelectorAll

IE8 をサポートするには、標準モードを確認してください。