ディビでホバーの形を変えることであなたのページを飾る

インタラクティブなデザインを作成することは、あらゆるWebサイトのルックアンドフィールを即座に向上させるのに役立ちます。 Diviの組み込みオプションを使用すると、多くのターンを実行して、Webサイトに本当に固有の効果を作成できます。

この投稿では、ホバー時に変形する図形でページを装飾する方法を紹介します。 私たちが得る結果は、デスクトップエクスペリエンスに焦点を当てていますが、小さい画面サイズでもすっきりとしたユーザーフレンドリーなデザインを維持しています。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、最初から再作成する2つの例を簡単に見てみましょう。

例1

例2

整形画像オーバーレイをダウンロードする

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

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

無料でダウンロード

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

ダウンロード

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

作り始めましょう！

新しいセクションを追加

背景色

新しいページを作成するか、既存のページを開いて見つめます。 通常のセクションを追加し、セクション設定を開いて、完全に黒の背景色を追加します。

• 背景色：＃000000

オーバーフロー

このチュートリアルの後半で整形された画像オーバーレイを切り取るために、セクションのメイン要素にCSSコードを1行追加して、セクションコンテナを超えるものがないことを確認します。

overflow: hidden;

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

画像モジュールを行に追加

シェイプされた画像オーバーレイをアップロードする

モジュールの追加を開始する時が来ました！ 最初に必要なモジュールは画像モジュールです。 ダウンロードしたフォルダにある最初の形状の画像オーバーレイをアップロードします。 この投稿にアクセスし、ファイルをダウンロードし、Illustratorファイルを開いて、必要に応じてカスタマイズすることで、より多くの形状の画像オーバーレイを見つけることができます。 ただし、この投稿のプレビューで共有された例を再作成するだけの場合は、この投稿の冒頭でダウンロードしたフォルダーで十分です。

デフォルトの背景色

画像モジュールの背景設定に移動し、次のデフォルトの背景色を追加します。

• 背景色：＃6a00ff

背景色にカーソルを合わせる

次のカラーコードを使用して、ホバー時に背景色を変更します。

• 背景色：＃ffa216

グラデーションの背景

画像モジュールにもグラデーションの背景を追加して続行します。

• 色1：＃ff2841
• 色2：rgba（255,255,255,0）
• グラデーション方向：168度
• 終了位置：68％

サイジング

[デザイン]タブに移動し、[全幅を強制]オプションを有効にします。

• 全幅を強制：はい

間隔

また、間隔設定に負の上部マージンを追加することにより、整形された画像オーバーレイの一部を非表示にしています。 チュートリアルの冒頭でセクションに追加したCSSコードの1行のおかげで、モジュールがセクションコンテナを超えないことに気付くでしょう。

• トップマージン：-22vw（デスクトップとタブレット）、0vw（電話）

デフォルトの変換回転

これで、モジュールの変換を開始できます。 次のデフォルトの変換回転設定をイメージモジュールに追加します。

• 中心：359度

ホバー変換回転

そして、ホバー時にこれらの値を変更して、変形する形状を作成します。

• 左：250度
• 中心：320度

CSS ID

画像モジュールにカーソルを合わせると、整形された画像オーバーレイは、その上にある他のすべてのモジュールと重なります。 これを回避するには、投稿の後半でホバー時にモジュールのz-indexを変更する必要があります。 これを実現するには、カスタムCSSクラスを画像モジュールに追加する必要があります。

トランジション

最後になりましたが、[詳細設定]タブの移行期間を長くすることで、スムーズな移行を作成しています。

• 移行時間：950ms

テキストモジュール＃1を行に追加

H2コンテンツを追加する

次に必要なモジュールはテキストモジュールです。 お好みのH2コンテンツを追加します。

H2テキスト設定

次に、[デザイン]タブに移動し、H2テキスト設定を変更します。

• 見出し2フォント：Didact Gothic
• 見出し2フォントの太さ：太字
• 見出し2テキストの配置：中央
• 見出し2のテキストの色：#ffffff
• 見出し2テキストサイズ：7vw
• 見出し2行の高さ：0.9em

間隔

いくつかのカスタムマージン値を使用して、このモジュールと画像モジュールの間にオーバーラップを作成します。

• トップマージン：-68vw
• 下マージン：8vw
• 左マージン：29vw
• 右マージン：29vw

テキストモジュール＃2を行に追加

コンテンツを追加する

前のテキストモジュールのすぐ下に別のテキストモジュールを追加し、選択した段落の内容を入力します。

テキスト設定

次に、[デザイン]タブに移動し、テキスト設定を変更します。

• テキストフォント：Open Sans
• テキストの色：#ffffff
• テキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• テキスト行の高さ：1.8em
• テキストの向き：中央

間隔

いくつかのカスタムマージン値も追加します。

• 下マージン：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）
• 左マージン：30vw（デスクトップ）、10vw（タブレットと電話）
• 右マージン：30vw（デスクトップ）、10vw（タブレットと電話）

行に分周器モジュールを追加

可視性

次に必要な最後のモジュールはDividerモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

色

次に、[デザイン]タブに移動し、仕切りの色を変更します。

• 色：#ffffff

サイジング

サイズ値も変更します。

• 仕切りの重量：7px
• 幅：15％
• モジュールの配置：中央

間隔

そして、いくつかのカスタムボトムパディングを追加します。

• 下マージン：5vw

セクション全体のクローンを作成する

2番目の例に移ります！ 完了したセクションのクローンを作成します。

画像モジュールの変更

新しいシェイプされた画像オーバーレイをアップロードする

整形された画像オーバーレイから始めて、いくつかの変更を加える必要があります。 先に進み、この投稿の冒頭でダウンロードしたフォルダーにある2番目の形状の画像オーバーレイをアップロードします。

デフォルトの背景色を変更する

次に、画像モジュールの背景設定に移動し、デフォルトの背景色を変更します。

• 背景色：＃2d007c

ホバーの背景色を変更する

ホバーの背景色も変更します。

• 背景色：＃008089

グラデーションの背景を変更する

グラデーションの背景と一緒に。

• 色1：＃0c0c0c
• 色2：rgba（255,255,255,0）
• グラデーション方向：168度
• 終了位置：68％

デフォルトの変換回転設定を変更する

トランスフォームエフェクトも変更します。 変換設定に移動し、デフォルトの変換回転値を変更します。

• 左：270度
• 中心：359度

ホバー変換回転設定の変更

ホバー時に同じ値を変更します。

• 左：192度
• 中心：280度
• 右：15度

ページにカスタムコードを追加

ページ設定を開く

さて、この投稿の最後の部分では、ホバーされているときに、変形する形状が他のすべてのモジュールの下にあることを確認します。 ページ設定を開きます。

CSSコードを追加する

次に、[詳細設定]タブに移動し、次のCSSコードを追加します。

.hover-state:hover {
z-index: -99; }

チュートリアル全体でセクションに割り当てたCSSクラスを使用しています。

プレビュー

すべての手順を完了したので、最後に結果を見てみましょう。

例1

例2

最終的な考え

この投稿では、Diviの変換オプションを使用してクリエイティブにする方法を紹介しました。 具体的には、整形された画像オーバーレイを備えた画像モジュールを使用して、変形する背景形状を作成しました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！