モジュール、列、および行のホバー効果を同時にトリガーする方法
公開: 2019-08-11Diviを使用してサイトを構築することの最も良い点の1つは、各ビルディングブロックにデザインオプションが詰め込まれていることです。 すべてのモジュール、列、行、およびセクションには、デフォルト状態とホバー状態の両方の設計設定が含まれています。 これにより、この要素を組み合わせたときに複数のホバー効果をトリガーするための扉が開かれます。
このチュートリアルでは、モジュール、列、行のホバー効果を同時にトリガーする方法を紹介します。 秘訣は、すべての要素が同じサイズとホバースペースを共有していることを確認することです。 しかし、要素を配置すると、ホバー効果とデザインで非常に創造的になることができます。
始めましょう。
スニークピーク
これは、異なるDivi要素のホバー効果のトリガーが同時にどのように見えるかの簡単な例です。
設計例を無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。
私たちのYoutubeチャンネルを購読する
チュートリアルに取り掛かりましょう。
複数のDivi要素でホバー状態を同時にトリガーする方法を理解する。
Diviの各要素（セクション、行、またはモジュール）には、基本的に要素自体のサイズである独自のホバースペースがあります。
これらの各要素には、その要素またはそれに含まれる子要素のいずれかにカーソルを合わせるとアクティブになる組み込みのホバーオプションがあります。
したがって、たとえば、セクションにホバーオプションを追加した場合、それらのホバーオプションは、セクションにホバーするたびにアクティブになります。
次に、セクション内の行のホバースペースにカーソルを合わせると、行とセクションの両方のホバーオプションがアクティブになります。 これは、行がセクションの子要素であるためです。
列にカーソルを合わせると、列、行、およびセクションのホバー状態がアクティブになります。
最後に、モジュールにカーソルを合わせると、モジュールとそのすべての親要素（列、行、セクション）のホバー状態がトリガーされます。
デフォルトでは、これらの各要素には、ユーザーが各要素を選択的にホバーできるようにするホバースペースにギャップを作成する間隔（パディング）があります。 ただし、各要素間の間隔を削除すると、すべての要素のホバー状態を同時にトリガーできます。
これにより、各要素のホバーオプションを組み合わせて、共有ホバースペースでそれらをアクティブ化するときに、同時に発生する可能性のある多くのホバー効果の組み合わせへの扉が開かれます。
ホバー効果を組み合わせる例
これがDiviでどのように機能するかの例を次に示します。
以下の例では、背景画像のある行があります。 ホバーすると、一種の境界線デザイン要素として表示される遅延ボックスシャドウがあります。
行の中には、ブラックボックスの影で塗りつぶされた列があります。 ホバーすると、列のボックスシャドウが徐々に減少し、行の背景画像が表示されます。
列の中には、背景が青色の宣伝文句モジュールがあります。 ホバーすると、青い背景が半透明の青い色に変わり、背景画像が表示されます。
各要素間に間隔があるため、個々のホバースペースにカーソルを合わせると、各要素の特定のホバー効果を確認できます。
ただし、間隔を取り除いて行にカスタム幅を指定すると、すべての要素が同じホバースペースを共有します。 言い換えると、モジュールは列と行のスペース全体を占有します。 したがって、モジュールにカーソルを合わせると、モジュール、列、および行のホバー効果が同時にアクティブになります。
遷移遅延はこの設定でうまく機能します
上記の例では、行と列のホバー効果に遷移遅延があり、この概念の機能を非常によく強調していることに注意してください。 モジュールにのみホバー効果の同様の組み合わせを追加しようとした場合、各ホバー効果に個別に異なる遷移遅延と期間を適用することを利用することはできません。
Diviでデザイン例を再現する
これがDiviの実際の世界でどのように機能するかについて説明するために、上記の例を再現してみましょう。
始めるために必要なもの
開始するには、次のものが必要です。
- Diviテーマがインストールされ、アクティブになっています
- フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）
- モックコンテンツに使用する画像
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
セクションと行の追加
最初に行う必要があるのは、1列の行を持つ通常のセクションを作成することです。
行と列の設定を更新する
次に、行の設定を開き、行に背景画像を付けます。
次に、行と列の間のホバースペースにギャップがないように、デフォルトのパディングを削除する必要があります。
- パディング：0px上、0px下
次に、ホバーの行に次のボックスシャドウを追加します。
- ボックスシャドウ：スクリーンショットを参照
- ボックスシャドウブラー強度：0px
- ボックスシャドウの広がりの強さ：0px（デスクトップ）、10px（ホバー）
- 影の色：＃063c68
次に、次のように期間と遅延を使用して遷移オプションを更新します。
- 移行時間：500ms
- 遷移遅延：700ms
次に、列の設定を開き、以下を更新します。
- ボックスシャドウ：スクリーンショットを参照
- ボックスシャドウブラー強度：0px
- ボックスシャドウの広がりの強さ：200px（デスクトップ）、0px（ホバー）
- 影の色：＃000000
- 移行時間：500ms
- 遷移遅延：200ms
宣伝文モジュールを追加する
次に、行に宣伝文モジュールを追加します。
次に、次のように宣伝文を更新します。
- 画像：[宣伝文句の画像を挿入]
- 背景色：＃0c71c3
- 背景色（ホバー）：rgba（12,113,195,0.35）
- テキストの配置：中央
- テキストの色：明るい
- パディング：上20px、下20px、左20px、右20px
最終結果
最終結果を確認してください。
最終的な考えとヒント
複数のDivi要素のホバー状態を同時にトリガーする方法を理解すると、いくつかのエキサイティングな設計の可能性が開かれます。 この投稿の例では、モジュール、列、および行のホバー状態を組み合わせるときに可能な多くのホバー効果の組み合わせのほんの一部に焦点を当てています。 さらに、セクションホバーオプションを組み合わせることでさらに多くのホバーオプションが得られる可能性についても調査しませんでした。 これらのホバー効果を自分で調べるときに、その過程で役立つヒントとアイデアをいくつか紹介します。
- 境界線の代わりにボックスシャドウを使用する–境界線は実際に要素にスペースを追加するため、不要なホバーギャップが発生する可能性があります。 ボックスシャドウは、実際のスペースを追加しないデザイン要素を追加します。
- 背景遷移ホバー効果の調査–各Divi要素には、クリエイティブなホバー効果のレイヤーに組み合わせることができる背景ホバーオプションがあります。
- 変換ホバーオプションを使用する–変換ホバーオプションを使用すると、ホバー時に要素のスケーリングや回転などのクリエイティブ要素を追加できます。 ただし、ホバー時に複数の要素を回転させるとジャンプが発生するため、難しい場合があります。
- トランジションオプションを活用する–各要素のホバー状態に異なるトランジション期間と遅延を追加すると、独自のホバーアニメーションを作成できます。
このチュートリアルが、Diviのいくつかの素晴らしいホバー効果の組み合わせを探求するきっかけになることを願っています。
コメントでお返事をお待ちしております。
乾杯！