Emergence.jsプラグインの使い方を詳しく解説-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-04-14 15:05:04

オリジナル

1500 人が閲覧しました

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

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

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

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

emergence.js の機能

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

インストール

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

ログイン後にコピー

スロットル:

リセット: データ属性の状態を表示後にリセットするかどうかを決定します。ビューポートを離れた後も要素の表示状態を維持したい場合は、これを 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 サイトの他の関連記事を参照してください。