Divi 5のトリガー、効果、ターゲットの違いを理解する

Divi 5の新しい相互作用は、トリガー、エフェクト、ターゲット（トリガー、効果、ターゲット）を使用します。それを開始するもの、何が起こるか、何が変わるかを分離し、レイアウト全体に明確で調整された動きを作成できます。この投稿では、各パートを説明し、それらがどのように合うかを示し、再利用できる簡単な例を説明します。それに到達しましょう！

トリガー、効果、ターゲットとは何ですか？

Divi 5の相互作用は、一緒に機能する3つの可動部品から構築されています。トリガーが物事を動かし、効果が応答の見た目を決定し、ターゲットがどの要素が変化するかを定義します。

YouTubeチャンネルを購読してください

インタラクションを設定すると、Diviは3つの部分すべてに記入するように依頼します。

各役割を個別に理解することで、それらが1つの完全なシステムにどのように接続するかを簡単に確認できます。

トリガーが始まるものです

すべての相互作用は、トリガーと呼ばれる開始アクションから始まります。アクションを開始するのは、マウスのクリック、ホバリング、ページの負荷など、ユーザーが取る最初のステップです。たとえば、マウスを価格カードの上に移動すると、チェーンが動いています。

それだけで、トリガーは何もしません。応答が必要です。

効果が起こることです

トリガーが発火すると、効果が続きます。これは、傾斜、フェード、スケール、ぼやけ、または動きの混合など、反応を決定する場所です。同じ価格設定カードがわずかにスケーリングし、カーソルがその上に浮かび上がるときに深い影を追加することを想像してください。それが効果です。

最後に、効果を適用する場所を決定する必要があります。

ターゲットが変化するものです

ターゲットは、トリガーが発火するときに変化する要素です。ホバリングは一般的に使用される相互作用ですが、要素自体にのみ影響します。言い換えれば、相互作用（トリガー）を開始した要素は、変化する要素（ターゲット）でもあります。

たとえば、列の上にホバリングすると、ターゲットでもあるため、同じ列スケールができます。

これにより、すべてが単一の要素に限定されていました。 Divi 5でそのように設定することはできますが、もはやそれに限定されていません。

これで、トリガーとターゲットが異なる場合があります。これにより、はるかに制御が得られます。たとえば、カーソルがセクションに入ると、触れられていなくてもボタンがスケーリングされます。この場合、ボタンがターゲットです。

彼らがどのように一緒に働くか

それぞれの部分をそれ自体で見た今、あなたがそれらをチェーンに接続するときに本当の力が生まれます：

• トリガーファイア：訪問者は、ページのクリック、マウスの移動、入り、出発、またはロードなどを行います。
• 効果の定義：表示する視覚またはモーションの応答の種類を決定します。
• ターゲットが適用されます：それはあなたが選んだ要素に着地する土地。

回路の配線のように考えてください。スイッチがフリップ、電流が流れ、電球が点灯します。

Divi 5では、好きな方法でその回路を配線できます。列の上のホバーは、ボタンを傾けることができます。ページの読み込みは、ヒーローイメージでフェードする可能性があります。 1回のクリックでは、複数のモジュールを同時にアニメーション化でき、セクションが調整されたと感じます。

これは、相互作用がより良いホバーのように感じるのを止め、デザイン言語のように機能し始めるときです。あなたはもはや自分自身に反応する1つの要素で立ち往生していません。レイアウト全体を接続するために、レスポンをチェーン、よろめき、広めることができます。

Divi 5の相互作用に関するすべてを学びます

Divi 5の式

Divi 5の相互作用の美しさは、ランダムアドオンではないということです。それらは明確な式に従います：トリガー→効果→ターゲット。複雑な相互作用を構築することは、繰り返し可能なパターンと見なされると、シンプルで一貫性があります。

この式を実践して、それらがどのように連携するかを示しましょう。この例では、ユーザーがボタンをクリックすると画面に表示される連絡先フォームを作成しましょう。

この効果を作成するには、トリガーとして使用するボタンに相互作用を設定します。これらの設定を選択します。

• トリガーイベント：クリックします（ユーザーがボタンをクリックしたときにイベントがトリガーされると判断しました）
• 効果アクション：要素を表示（隠された連絡先フォーム）
• ターゲットモジュール：セクション（連絡先）は、連絡先セクションに割り当てられたラベルです。

次に、アンカーリンクを設定して、連絡先セクションを開きます。最初に、連絡先フォームのセクション設定を開き、 [詳細]タブに移動します。 CSS IDおよびクラスでは、 CSS IDを設定します：連絡先。

次に、ボタンの設定に移動し、ボタンリンクURLフィールドに＃Contactを入力します。

最後に、フォームの初期状態を非表示に設定して、トリガーされたときにのみ表示されます。連絡先フォームのセクション設定を開き、 [詳細]タブに移動し、目的の下で、それを非表示にするブレークポイントを選択します。

今それをテストします。 [ボタン]をクリックすると、表示された連絡先セクションが表示されます。

その単純なフロー（クリック→表示→連絡フォーム）は、ポップアップ、トグル、穏やかなloadの露出、またはセクション全体のチェーンアニメーションのために再利用するのと同じパターンです。トリガー、効果、ターゲットの観点から考えると、可能性は迅速に開きます。

Divi 5で今日のやり取りを試してみてください

パターンがあります。今、それを実際のページで動作させます。テストレイアウトを開き、10分で終了できる小さな相互作用効果を構築します。クライアントサイトで実際に使用するものを選択してください。

ローリングするためのミニプロンプトは次のとおりです。

• マウスはセクションに入り、ボタンスケールを微妙にします
• [連絡先]ボタンをクリックすると、タックアウェイフォームが表示されます
• カードのマウスの残りは、傾きをリセットします
• ページロードはヒーローイメージのフェードをフェードし、次にヘッドラインの後に見出し

Divi 5のインタラクション機能をまだ使用している場合は、コメントでお知らせください。