の組み込み変換オプション Divi は非常に便利なデザイン ツールであることが証明されており、ページ上の要素のサイズ変更、回転、傾斜、または配置を簡単に行うことができます。 また、アイテムをホバー状態にして素晴らしいホバー効果を出すこともできます。 そこで今日は、これらのアニメーションをワンクリックで展開する方法を紹介します。
この方法では、jQuery を使用する必要があります。 この手法の優れた点は、組み込みの設計パラメーターを使用できることです。 Divi 変換プロパティのスタイルを設定し、マウスをクリックしてそれらの変換プロパティを有効 (または無効) にします。 これにより、明らかにするためのユニークな可能性が大量に開かれます。 コンテンツ ホバーではなくクリックして項目を移動すると非表示になります。 また、多くの CSS を知る必要性も軽減されます。
のは、始めましょう。
始めるために必要なもの
このチュートリアルに必要なのは、 Divi。 始めるには、WordPress ダッシュボードにアクセスしてください。 新しいページを作成し、ページにタイトルを付けて、フォアグラウンドの Divi ビルダーでデザインを続けます。 「最初から構築」オプションを選択します。 これで準備は完了です。
基本的な考え方の説明
このチュートリアルで詳しく説明する前に、この手法がどのように機能するかを簡単に説明します。
Diviで要素（セクション、行、またはモジュール）をカスタマイズするたびに、バックグラウンドでこの要素にカスタムCSSを追加します。 たとえば、Diviの組み込み設定を使用して、変換回転プロパティをblurbモジュールに追加して、モジュールをZ軸に沿って20度回転させることができます。
しかし、舞台裏では、このテキストモジュールに追加され、次のようなカスタムCSSを作成します。
.et_pb_text_0 {変換：rotateZ（20deg）; }
十分に単純です。 そして、同じホバー変換オプションを追加したいとします。 Divi Builderの設定で、ホバー状態の変換プロパティを適用する必要があります。
そして、コードは舞台裏で次のようになります。
.et_pb_text_0：hover {transform：rotateZ（20deg）;} }
ただし、クリック時にトランスフォームプロパティを展開する場合は、動作が少し異なる必要があります。 要素（またはテキストモジュール）でクリックイベントをトリガーするには、javascriptコードを入力する必要があります。
現在の例では、基本的に、クリック時に変換プロパティ「transform：rotateZ（20deg）」をオンまたはオフにすることが主な目標です。 これを行う簡単な方法は、プロパティ「transformer：none！」を使用してカスタムCSSクラスを作成することです。 ページ（または外部スタイルシート）の設定の「重要」。 こんな感じになります。
.toggle-transform-animation {変換：なし、重要です。 }
そのCSSを配置します。 CSSクラス「toggle-transform-animation」を、transformプロパティを持つblurbモジュール要素に追加できます。
これにより、変換プロパティが無効 (オーバーライド) になり、変換プロパティのスタイルが既に追加されている場合でも、最初にアクティブ化されなくなります。
これで、要素をクリックしたときにこのカスタムCSSクラスをアクティブ化（追加および削除）するだけです。 したがって、要素をクリックするたびに、クラスが削除され、変換プロパティ（Diviで追加したプロパティ）が展開されます。
これを行う方法の簡単な例を次に示します。 まず、「transform_target」という名前のblurbモジュールに別のCSSクラスを追加します。
次に、[Divi] > [テーマ オプション] > [統合] に移動し、次の jQuery スクリプトをヘッダーに追加します。 ブログ:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
それで全部です ！ これで、プレゼンテーションモジュールをクリックするたびに、Diviでプレゼンテーションに追加した変換プロパティが有効または無効になります。
次に、例を作成して、これが自分のプロジェクトにどのように役立つかを見てみましょう。
クリックで変換プロパティを切り替えてDiviにコンテンツを表示する方法
この例では、上で使用した簡単な宣伝文の例をそのまま使用します。 次に、この後ろに追加の宣伝文句を追加して、上部の宣伝文句をクリックすると邪魔にならないように移動して、 コンテンツ 文書の後ろにある追加の宣伝文句。
Blurbモジュールの前面と背面の作成
次に、プレゼンテーションモジュールを1列に追加します。
を更新します コンテンツ タイトルのみを含める宣伝文句 (デフォルトの本文コンテンツを削除) から、宣伝文句アイコンを追加します。
次に、設計パラメーターを次のように更新します。
背景色：#4c5866
アイコンの色：#ffffff
テキストの向き：中央
テキストの色
：軽量のカスタムマージン：下部の0px
カスタムパディング：上部に15％、下部に15％、左側に10％、右側に10％
後でこのモジュールに戻りますが、今のところ、追加のコンテンツを持つ「リターン」モジュールとして機能する2番目のBlurbモジュールを作成する必要があります。
これを行うには、作成したプレゼンテーションモジュールを複製します。
次に、XNUMX番目のモジュールで、プレゼンテーションアイコン（およびデフォルトの画像）を削除し、本文のコンテンツをモジュールに追加し直します。 次に、次のように設計パラメータを更新します。
背景色：rgba（76,88,102,0.3）
文字色：ブラック
カスタムパディング：20％top
サマリーの前にモジュールを配置します
100つのブラーのスタイルが設定されたので、前（上）のブラーに戻り、後ろ（下）のブラーの上に配置する必要があります。 これを行うには、高さ100％、幅XNUMX％の絶対位置を指定します。
最初に、上部/前面プレゼンテーションモジュールの設定を開き、以下を更新します。
身長：100％。
幅：100％。
次に、次のカスタムCSSコードをメイン要素に追加します。
位置：絶対！重要です。 遷移：すべての.5。
次に、zインデックスを次のように更新します。
Zインデックス：2000
絶対位置と100％の高さと幅、およびzインデックスを組み合わせることで、blurbモジュールがその背後のblurbモジュールの上にとどまることが保証されます。 遷移プロパティは、実際には、次のクリックで展開する変換オプションの遷移の期間です。 そして、「cursor：pointer」は、要素がユーザーにクリック可能に見えるようにカーソルを変更することです。
変換オプションとカスタムクラスをフロントブラーブに追加する
今こそ、変換プロパティをフロントブラーに追加するときです。 次に、jQueryがクリック時にこれらのプロパティを切り替えるために必要なカスタムCSSクラスを追加します。
フロントブラーブデザインパラメーターの下に、次の変換プロパティを追加します。
XおよびY変換スケール：20％
変形原点：上部中央
この時点で表示される変換デザインは、クリック時にトリガーされるものになることに注意してください。 Diviビルダーを利用するだけで、目的のデザインを取得できます。 この場合、フロントブラーは収縮し、クリック可能なアイコンのように上部の中央に配置されます。
完了したら、次のようにjQueryでフロントブラーブを対象とするために必要な2つのCSSクラスを追加します。
CSSクラス：toggle-transform-animation transform_target
（各クラス名は必ずスペースで区切ってください）
次に、jQueryで変換プロパティを有効または無効にするために使用される次のカスタムCSSコードスニペットを追加します。
.toggle-transform-animation {transform：none！important; }
このクラスが適用されているため、以前に追加されたブラーブ変換プロパティが無効になっていることがわかります。
次に、Divi>テーマオプション>統合に移動し、次のjQueryスクリプトをブログの先頭に追加します。
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
最終結果を見てみましょう。
この例を使用して、さらに印象的なデザインを作成できます。 コメントセクションであなたの意見を共有することを躊躇しないでください。
