Divi 5の相互作用（ポップアップ、トグル、マウス効果など）

今日、私たちは、ポップアップやトグルなどのインタラクティブな要素を作成するための堅牢なシステムであるDivi 5の相互作用をリリースすることに興奮しています。

ポップアップビルダーではありません。それは何でもビルダーです。トリガーを作成し、効果を割り当て、ターゲットを選択し、カスタムインタラクションを実現します。あなたはこのシステムで非常に多くの素晴らしいことをすることができます、そして、私はそれがどのように機能するかをあなたに示すのを待つことができないので、飛び込んでみましょう。

次のビデオをチェックして、新しい機能を参照してください。

独自のインタラクティブな要素を構築します

すべての要素の高度なタブに新しいインタラクショングループが表示されます。 [インタラクションの追加]ボタンをクリックすると、インタラクションエディターが開き、各インタラクションのトリガー、効果、ターゲットを構成できます。

トリガーは、クリックしたりホバリングしたりするときなど、相互作用を開始します。その効果は、可視性、プリセット、または属性の切り替えなど、インタラクションがトリガーされたときに発生し、ターゲットはページ上の影響を受ける要素です。

相互作用の例

これらの設定に深く入る前に、どのような相互作用が達成できるかの例をいくつか見せてみましょう。

例1：ポップアップの構築

以下のビデオ例では、インタラクションを使用してポップアップを作成しました。

Enter ViewPortトリガーをセクションに追加しました。これは、トグルの可視性効果をポップアップに適用します。このセクションは私のビューポートに入り、ポップアップの可視性をトリガーすると、Diviのアニメーション設定を使用してスライドします。

さらに、ポップアップ内のアイコンモジュールにはクリックベースのインタラクションがあり、ポップアップの可視性を切り替えて閉じます。あらゆる種類のポップアップまたはフローティングバナーを作成できます！

例2：トグルの構築

以下のビデオ例では、インタラクションを使用して毎月の価格設定テーブルと毎年の価格設定テーブルを切り替えました。

2つのインタラクションを行に追加して、毎年および毎月の価格設定セクションの可視性を切り替えました。次に、2つのアイコンモジュールの可視性を切り替えるためにさらに2つのインタラクションを追加し、クリック時にユーザーに追加のフィードバックを提供しました。

例3：プリセット間の遷移

最も強力な効果の1つは、トグルプリセット効果です。プリセットを使用すると、要素の設定を変更できるため、できることに制限はありません。トリガーがターゲット要素のプリセットを変更すると、多くの方法でそれを変換できます。

以下のビデオの例では、2つのインタラクションを設定して、ビューポートを入力して終了するときに、行のプリセットを追加および削除します。ハイライトプリセットは、行の背景色とスケールを変更し、ボックスシャドウを追加し、ユーザーがページを下にスクロールしながら注意を引いてください！

例F：マウスの動き効果

インタラクションシステムのマウスモーブメントベースの効果はとても楽しいです。

以下のビデオ例。ヒーローセクションにいくつかの相互作用を追加し、さまざまな感度のマウスモーブメントベースの効果を備えたさまざまな要素をターゲットにしました。

マウスでの相互作用トリガーは、マウスが動くにつれて変化する要素に不透明度、動き、および傾き効果を適用します。また、ボタンモジュールに相互作用を追加しました。これにより、プリセットを切り替えて正方形のアウトラインのスタイルを変更します。

可能性は無限です！

私はさまざまな例を続けることができ、あなたが思いついたものを見て興奮しています。

インタラクションエディターをより詳細に見ると、属性、Cookie、スクロールなど、要素へのスクロールなど、私がまだ言及していないことで再生するための追加のエフェクトが表示されます。

たとえば、属性効果を使用して、要素のCSSクラス、ID、またはその他を変更できます。

相互作用のバージョン1は、次の効果をサポートしています。

• 可視性を切り替える- 目に見える状態と非表示状態の間の要素を自動的に切り替えます。
• 表示要素を表示- 隠された要素を表示します。
• 要素を非表示- 目に見える要素を隠します。
• トグルプリセット- 既存のプリセットをオプションの交換で、要素のプリセットオン/オフを切り替えます。
• プリセットの追加- 既存のプリセットをオプションの交換して、プリセットスタイルのクラスを要素に適用します。
• プリセットを削除- 要素からプリセットスタイルのクラスを削除します。
• トグル属性- CSSクラスやIDなどの要素の固有のHTML属性値を追加または削除します。
• 属性の追加- 特定のHTML属性値を要素がまだ存在していない場合は、要素に追加します。
• 属性を削除- 要素から特定のHTML属性値を削除します。
• トグルクッキー- クッキーからクッキー値を追加または削除します。たとえば、ユーザーがポップアップを見たときにポップアップが追跡されるように見えるときにCookieを設定します。次に、Diviの状態オプションを使用して、そのユーザーの将来のページ訪問でポップアップを非表示にします。
• クッキーを追加- 訪問者のブラウザに定義するクッキーとクッキーの値を追加します。
  クッキーを削除- 指定されたクッキーを取り外します。
• 要素までスクロールします- ページをスムーズにスクロールして、ターゲット要素を表示します。
• ミラーマウスの動き- ターゲット要素は、調整可能な感度を備えたさまざまな動きタイプ（翻訳、スケール、不透明、または回転）を使用して、トリガー要素内のマウスの動きに従います。

今日Divi 5を試してみてください

DIVI 5のインタラクションは本日利用できます。これは、今年DIVIに登場する多くの機能の1つです。

Divi 5以降の最終リリースを進むにつれて、2週間ごとに更新を進めることができます。優先順位に応じて、Divi 5を使用して新しいWebサイトを構築したり、機能を追加するまで待機したりすることができます。

Divi 5のオリジナルの多相リリーススケジュールで概説されているように、Divi 5 Public Alphaは「Divi 5 Lite」のようなものです。いくつかの機能が欠落しており、既存のWebサイトには適していない場合がありますが、Divi 4のエクスペリエンスを好む場合は、新しいWebサイトで使用する準備ができています。

私たちはあなたにそれを試してほしい、そしてあなたがそれを愛しているなら、それを使ってください。誰もがそれを愛しているとき、私たちはそれを公式にします。

相対的な色を試しましたか？

あなたがそれを見逃した場合に備えて、私たちは最近Divi 5の相対色をリリースし、Diviをカラー管理と高度なカラーシステムの明確なリーダーにしました。これにより、HSLを使用してネストされた色の関係を備えた数学的に美しい変数ベースのカラーシステムを作成できます。この機能で眠りたくありません。

すべての詳細については、このビデオをご覧ください。

Divi 5の更新が進行中です

2025はDivi 5の年です。退屈な仕事は私たちの後ろにあります。私たちはSuper-Fast Foundationを構築しましたが、Diviがカムバックする時が来ました。

Diviのカムバックのためにここにいる場合は、このビデオが好きでコメントを残して、私たちに大きな恩恵を与えてください。あなたがDiviを応援しているのを見るのは私たちにとって多くのことを意味し、アルゴリズムを供給して言葉を広めることが不可欠です。

YouTubeでフォローし、Diviニュースレターを購読することを忘れないでください。そうすれば、更新を見逃すことはありません。もう1つのDivi 5機能の発表でお会いしましょう。