Emergence.jsプラグインの使い方を詳しく解説

今回は、Emergence.js プラグインの使用方法について詳しく説明します。Emergence.js プラグインを使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。

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

このプラグインは、ブラウザーでの表示/非表示に基づいて要素を操作できるように設計されています。これにより、開発者は独自の CSS または JS を自由に使用して、

アニメーション や状態の変化を表示できるようになります。クラスの代わりに HTML5 データ属性を利用して開発を簡素化します。 Emergence.js は、この種のプラグインの中で最も軽量で最も互換性のあるプラグインの 1 つです。

emergence.js の機能

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

IE8+ とすべての最新ブラウザをサポート
圧縮後はわずか 1 kb です

インストール

Emergence.js のインストールは非常に簡単です。 npmのインストール方法は以下の通りです:

npm install emergence.js

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

りー

使い方

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

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

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

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

カスタマイズオプション

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

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

オプションの説明

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

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.');
 }
 }
});

スロットル:

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

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

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

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

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

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

さらに、Emergence.js には、機能がまったく逆の 2 つの高度なメソッド emerging.engage(); も提供されています。

Emergence.js はブラウザ API: querySelectorAll

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ネイティブ JS で Ajax 非同期を実装する方法とは何ですか

オペレーション モーダル シングル ロード データ

以上がEmergence.jsプラグインの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。