酸素ビルダーリピーターのためのユニークなホバー効果
公開: 2022-04-10このチュートリアルでは、OxygenBuilderRepeatersに表示されるコンテンツに独自のホバー効果を作成します。 Codropsの「DistortionHoverEffect」をモデルにしており、そのリソースのソースコードを使用すると、訪問者がリピーターセルにホバリングすると、この効果によってユーザー定義の画像に歪んだフェードが作成されます。
このチュートリアルには、OxygenBuilderのいくつかの優れた概念が組み込まれています。
- 高度なリピーター技術
- ACFフィールドグループとOxygenBuilderとの手動統合
- 基本的なCSSグリッド
- 動的属性
- コードブロックの使用法と中間JS
さらに一歩進んで、これを100％動的な機能にします。つまり、設定して忘れてしまいます。 セルごとに特定の効果を初期化する必要はありません！
フォローアロング（ソースダウンロード）：
注：これは概念実証であり、実稼働サイトで使用するには最適化が必要になる可能性があります。
他の2つのこと：
- OxygenBuilderコースを開始します。 ここで詳細を確認し、順番待ちリストに参加できます。
- これは私たちの素晴らしいFacebookグループでリクエストされたチュートリアルでした。 ぜひご参加ください！
エフェクトデモ：
ステップ1：ACFフィールド
ACFを使用して、これを100％動的にし、エンドユーザーが簡単に編集できるようにします。 フィールドグループを作成し、ホバー画像とディスプレイスメント画像を追加します。 最初の画像は、投稿の注目画像になります。 ホバー画像は、訪問者がリピーターの投稿にカーソルを合わせたときに効果が薄れるものです。
ディスプレイスメント画像は、2つの画像間で独自のモーフ/フェードアニメーションを作成するために使用されます。 この例では、変位に次の画像を使用しています。
実際にはどの画像でも使用できますが、通常はテクスチャの優れた白黒画像が最適です。 この方法を試すのは簡単です！
新しい投稿を追加すると、フィールドグループと関連する画像は次のようになります。
ステップ2：エフェクトの構造を作成する
基本的に、Codropsの例からソースコードを少し変更してコピーしています。
Oxygen Builder要素を使用して、上記のHTML構造を単純に複製します。 上記のHTMLの例からクラスを追加することを忘れないでください。これから、CSSを追加し、JSはそれらを使用して特定の要素を識別します。 これらのクラスを変更する場合は、それに応じてCSSとJSを更新する必要があります。
私たちのリピーターは、CSSグリッドを使用して、多くの作業を行わずにすべてのセルを均等に配置しています。
ステップ3：動的にする
動的になるように構成するものがいくつかあります。 まず、リピーターにWordPressPostタイプを照会させます。
次に、日付と投稿のタイトルを動的に設定します。
次に、3つの画像を設定します。 これは物事が複雑になる可能性がある場所です。 画像1のURLを注目画像のURLに設定します。
画像2のURLをACFで設定したホバー画像に設定します。 このチュートリアルでは、「動的データの挿入」ポップアップにACFフィールドが表示されませんでした（おそらくOxygen Builder 4.0 Beta 2のバグが原因です）。 これを経験したことがある場合は、簡単な回避策があります。
1-動的データを挿入します
2-PHP関数の戻り値を選択します
3- get_field('fieldname')を使用してACFフィールドコンテンツを手動で挿入します
最後に、エフェクトがモーフトランジションを作成するために使用するディストーションイメージを設定する必要があります。 これは、JSが読み取ってエフェクトに組み込むデータ属性としてHTMLに挿入されます。 上記のHTMLから、効果を変更するために編集できるいくつかの属性があることがわかります。
動的にする必要がある主なものはデータ変位です。これには、ACFを使用して投稿に設定された画像のURLが含まれます。 他の3つの属性をハードコーディングしましたが、以下に概説するのと同じ方法を使用して、これらのユーザーを編集可能にすることもできます。
画像ラッパー要素（2つの動的画像の周囲のdiv）に移動します。 [詳細設定]->[属性]をクリックして、以下を追加します。
data-displacementの場合、コンテンツのdata +ボタンをクリックし、対応するACFフィールドを挿入することで、これを動的にします。
フロントエンドHTMLは次のようになり、JSはこのすべてのデータ（動的でACFを介してユーザーが編集可能）を使用して、WordPressにクールなディスプレイスメントホバー効果を作成します。
ステップ4：CSS、ライブラリ、JSを追加する
次のCSSをユニバーサルCSSスタイルシートに追加します。 すべてをうまく機能させるには、追加のCSSスタイルを試す必要があるかもしれません。
最後に、必要なJSライブラリとコードをロードします（これはコードブロックで行いました）。
この例では静的に使用しています（GitHubからImagesLoadedライブラリとHover Effectライブラリをプルしています）が、理想的には、ScriptsOrganizerやAdvancedScriptsなどのツールを使用してサイトでこれをホストする必要があります。
また、変位効果を生成するために機能する2つの基盤となるライブラリであるThree.JSとTweenMax.JSをロードします。
最後に、JSは次のことを行います。画像が読み込まれるタイミングを識別し、 .grid__item-imgを持つ要素にホバー効果を適用して、各投稿から関連する画像と変位画像を取得します。 完全に動的であり、OxygenBuilderリピーターによって返される投稿の数に関係なく機能します。
これらすべてを追加すると、エフェクトが機能するはずです。
これは、等方性Facebookグループのメンバーからリクエストされました。 こちらからご参加ください。