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

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

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

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

emergence.jsの特徴

1. 他のコンポーネントに依存する必要はありません

2. IE8+とすべての最新ブラウザをサポート

3. 圧縮後わずか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 === 'visible') {
  console.log('Element is visible.');
 } else if (state === 'reset') {
  console.log('Element is hidden with reset.');
 } else if (state === 'noreset') {
  console.log('Element is hidden with NO reset.');
 }
 }
});

オプション 説明

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

var customContainer = document.querySelector('.wrapper');
// 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 をサポートするには、標準モードを確認してください。

関連する推奨事項:

jquery.validata.js プラグイン コレクション、必要なものはすべてここにあります

Vue.js プラグイン開発の詳細な説明

jQuery と jQuery.cookie.js の組み合わせスキン変更機能を実装するプラグインの例

以上がEmergence.js 要素の可視性を検出するための JS プラグインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。