Diviでホバー効果をCSS視差の背景と組み合わせる方法

Diviの背景画像でCSS視差を使用すると、驚くほどユニークなホバー効果を作成できます。 視差は、ウェブサイトに活気を与えることができる多くの方法の1つです。 また、視差とDiviのさまざまなホバーオプションを組み合わせると、コンテンツがさらに活気づきます。

このチュートリアルでは、Diviで独自のCSS視差背景ホバー効果をすばやく簡単に設計できることを示します。 プラグインやカスタムコーディングは必要ありません！

始めましょう。

スニークピーク

これは、このチュートリアルで設計するcss視差の背景ホバー効果の概要です。

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、次のものが必要です。

1. Diviテーマがインストールされ、アクティブになっています
2. フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）
3. モックコンテンツに使用する画像

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

パート1：Diviでブレイクアウト視差ホバー効果を作成する

まず、1列の行を持つ通常のセクションを作成します。

モジュールを追加する前に、セクション設定を開き、CSS視差を使用して背景画像を追加します。

画像の幅が1920px以上であることを確認してください。 このデザインは、テクスチャの多い暗い背景画像でうまく機能します。 DiviBuilderから入手できるCoffeeShop LayoutPackの1つを使用しています。

次に、次のようにセクションにパディングを追加します。

パディング：10vw上部、10vw下部

宣伝文モジュールを追加する

セクションの背景とパディングが配置されたら、行に宣伝文モジュールを追加します。

次に、本文テキストの数文で宣伝文の内容を更新します。 そこにデフォルトのタイトルを保持できます。

次に、クリックしてアイコンを使用し、宣伝文のコーヒーアイコンを選択します。

コンテンツの準備ができたら、次のようにデザイン設定を更新します。

アイコンの色：#ffffff
アイコンフォントサイズ：50px
テキストの配置：中央
タイトルフォント：Oswald
タイトルフォントスタイルTT
タイトルテキストの色：#ffffff
タイトル文字の間隔：2px
ボディフォント：Nunito
本文の色：#ffffff
本文の文字間隔：1px
パディング：上30px、下30px、左30px、右30px

行幅を調整する

宣伝文句を設計したら、行の設定にジャンプして最大幅を調整します。

最大幅：80％

列の設定

この例では、列レベルでホバー効果をアクティブにします。 これにより、現時点では単一の宣伝文モジュールを使用している場合でも、複数のモジュールを使用してコンテンツを作成できます。

この視差ホバー効果を機能させるには、セクションで使用したのと同じ背景画像を列に追加する必要があります。 また、列の背景画像にも同じCSS視差メソッドを使用する必要があります。

列の設定を開き、CSS視差を使用して同じ背景画像を追加します。

列の背景画像とセクションの背景画像の違いはわかりません。どちらもCSS視差を使用しているため、基本的にWebページのまったく同じ場所に画像が固定されます。 ただし、ホバー効果を設定すると違いがわかります。

次のようにカラムデザイン設定を更新し続けます。

パディング：4vw上部、4vw下部
丸みを帯びた角：10px

次に、次のように、ホバー時にのみ表示されるボックスシャドウを列に付けます。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの垂直位置：0px
ボックスシャドウブラー強度：36px
影の色（デフォルト）：rgba（0,0,0,0）
影の色（ホバー）：rgba（0,0,0,0.72）

次に、変換オプションに移動して、ホバー時に次の変換スタイルを更新しましょう。

変換スケール（ホバー）：105％

これにより、列（およびその内容）がわずかに拡大され、背景画像からわずかに飛び出す効果が作成されます。

変換変換Y軸（ホバー）：-2.5％

これにより、ホバー時に列がわずかに上に移動し、わずかに非対称の変位が作成されます。

変換原点：100％50％（中央下）

これにより、中央下部の原点からスケーリング効果が始まります。これは、移動値と組み合わせると、微妙なヒンジ効果に似ています。

これがこれまでのcss視差ホバー効果です。

次に、行の設定を開き、列を2回複製して、それぞれが同じ宣伝文句とホバー効果を持つ合計3つの列を作成します。

最終結果

これが最終的なデザインです。 ページを下にスクロールすると、視差の背景画像がデフォルトで非表示になっていることに注目してください。 次に、各列にカーソルを合わせると、それらが飛び出します。 また、列にカーソルを合わせてページを下にスクロールすると、視差が列で機能していることを確認できます。 微妙でありながら非常にユニークなホバー効果です。

ホバー効果に回転を追加する

また、css視差ホバー効果に回転を追加して、デザインに素敵なタッチを追加することもできます。 各列の設定を開き、以下を更新するだけです。

変換回転Z軸（ホバー時）：5度

混ぜたい場合は、真ん中の列に-5度回転させることができます。

これが最終結果です。

これは、背景画像が明るく、テキストが暗い同じデザインです。

パート2：Diviで拡大鏡の視差ホバー効果を作成する

最初のデザインからセクションを複製してから、セクション設定を開き、背景画像を新しいものに置き換えます。 ビデオゲームレイアウトパックのものを使用しています。これは、拡大視差ホバー効果を実際に強調しているためです。

行設定を更新する

この設計には追加のスペースが必要になるため、行設定を開いて以下を更新します。

側溝幅：1
幅：100％
最大幅：98％

その後、[コンテンツ]タブにジャンプし、2つの列を削除して、1つだけが残るようにします。

列の設定

この設計では、列レベルではなくモジュールレベルでホバー効果を適用する必要があるため、列のデフォルトスタイルをリセットする必要があります。 これを行うには、列アイテムを右クリックして、「アイテムスタイルのリセット」を選択します。

宣伝文モジュールを更新する

列の設定がデフォルトのスタイルに復元されたら、宣伝文のモジュール設定を開き、セクションに追加されたものと同じcss視差の背景画像を追加します。

サイジング

円形モジュールを作成するには、最初に次のように一致する幅と高さを指定する必要があります。

幅：300px
モジュールの配置：中央
高さ：300px

国境

円形の効果を完成させるには、丸みを帯びた角を更新して、わずかな境界線を付ける必要があります。

丸みを帯びた角：50％
ボーダー幅：1px
ボーダーカラー：rgba（255,255,255,0.12）

ボックスシャドウホバー効果

次に、次のように、ホバー時に宣伝文にボックスシャドウを付けます。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウブラー強度：36px
影の色（デフォルト）：rgba（0,0,0,0）
影の色（ホバー）：rgba（0,0,0,0.7）

ホバー効果を変換する

ボックスシャドウを配置したら、次のように変換オプションを更新します。

変換原点（デフォルト）：50％0％（中央左）

これにより、宣伝文が3列の行の左端に配置された後、宣伝文がページの外側に拡張されないようになります。

変換スケール（ホバー）：130％

これにより、宣伝文句が拡大され、視差の背景画像が実際に拡大されて、クールなホバー効果が得られます。

列を複製する

宣伝文句が完了したら、列を複製して、それぞれが同じ宣伝文句モジュールを持つ3つの列を作成できます。

行設定を開き、列を2回複製して、合計3列にします。

変換原点を更新します

宣伝文モジュールはすべて変換の原点が「中央左」に設定されているため、中央と右の列の宣伝文に合わせて調整し、適切な位置から拡大縮小する必要があります。

列2の宣伝文モジュールの設定を開き、以下を更新します。

変形原点：50％50％（中央中央）

次に、列3の宣伝文モジュールの設定を開き、以下を更新します。

変換元：50％100％（中央右）

最終結果

次に、最終結果を確認します。 効果が宣伝文の背後にあるcss視差の背景画像を実際に拡大する方法に注目してください。 また、宣伝文句にカーソルを合わせて下にスクロールすると、虫眼鏡の効果に似ています。

実際、これはとてもクールなので、ホバー状態だけでなく、デフォルトのスタイルのままにしておくことをお勧めします。

最終的な考え

この投稿の例で、クリエイティブジュースが少し流れて、CSS視差と組み合わせるさらにクールなデザインとホバー効果を探索できるようになることを願っています。 セットアッププロセスは本当に簡単ですが、可能性は無限にあるようです。

コメントでお返事をお待ちしております。

乾杯！