Hover.cssを使用してDiviの宣伝文句モジュールに高度なホバー効果を追加する方法

公開: 2017-08-25

今日のDiviチュートリアルでは、Hover.cssを使用してDiviの宣伝文句に高度なホバー効果を追加する方法を紹介します。 もちろん、箱から出してすぐに、Diviには、考えられるあらゆる種類のページに見事な宣伝文句を作成するために必要なすべてが揃っています。 しかし、私たちのコミュニティでは、クライアントサイトを競合他社とは大きく異なるものにするために、Diviを限界まで（場合によってはそれを超えて）プッシュしようとしているデザイナーがたくさんいることを私たちは知っています。 したがって、このチュートリアルは、Diviの高度な機能を利用することを楽しんでいる最先端の人々すべてに向けられています。

今日作成するものを見てみましょう。

プレビュー：最終結果

この投稿の最後に（そしてhover.cssをガイドした後）、次の結果を達成する方法を紹介します。

hover.css

もちろん、これはhover.cssで可能なことに関しては氷山の一角にすぎませんが、始めるのに役立ちます。

インスピレーション

Webサイトのさまざまな宣伝文にhover.css効果を使用するXDWebDesignからインスピレーションを得ました。 以前の投稿では、特定の宣伝文句モジュールを再作成する方法に関心を示したコメントリクエストがありました。 正確に再現するつもりはありませんが、後で簡単に実験できるように、これらのエフェクトを追加するための基本を説明します。

hover.css

Hover.cssを使用してDiviの宣伝文句モジュールに高度なホバー効果を追加する方法

私たちのYoutubeチャンネルを購読する

あなたのウェブサイトでHover.cssを入手してください

何かに入る前に、まずhover.cssを紹介します。 Hover.cssは、Webサイトのあらゆる種類の要素で使用できる多くの効果で構成されています。 hover.cssエフェクトをWebサイトに追加する主な方法は2つあります。 CSSファイルを追加するか、必要な効果を選択して、DiviBuilder内でそのCSSを使用するだけです。

モジュール内の要素のCSSコード行を少し調整する必要があるため、最終結果を作成するために必要ないくつかのCSSコード行を手動で追加する方法を示します。 ただし、Webサイトにすべての効果を持たせたい場合は、CSSファイルをWordPressディレクトリに追加するだけでそれを行うことができます。

Hover.cssをダウンロード

さて、始めるために、あなたはあなたがイアン・ランのウェブサイトに行くことによって見つけることができるhover.cssファイルを必要とするでしょう。 または、ここをクリックして、Github上のファイルに直接送信することもできます。 ファイルをダウンロードしたら、解凍します。

購入ライセンス

次に考慮する必要があるのは、hover.cssが無料ではないという事実です。 Webサイトを商業目的で使用する場合は、ライセンスの購入が必須です。 購入の可能性には2つのタイプがあります。

  • 開発者ライセンス（$ 14、1プロジェクトに有効）
  • チームライセンス（18ドル、無制限のプロジェクトに適しています）

必要に応じて、ライセンスを購入し、Webサイトでエフェクトを使用できます。

ホバーのリスト

hover.css

次に、hover.cssで自由に使用できるさまざまなホバー効果を見てみましょう。 あなたは様々なカテゴリーに属するそれらの束を持っています。 合計で7つのカテゴリがあります。

  • 2Dトランジション
  • バックグラウンド遷移
  • アイコン
  • ボーダートランジション
  • シャドウとグローの遷移
  • スピーチバブル
  • カール

これらの各エフェクトには、BlurbモジュールまたはWebサイト上の他の種類のモジュールに追加の調整を加えることができる一連のエフェクトが含まれています。

インストール

hover.cssを子テーマに直接含めることでインストールできますが、その一部を使用することもできます。 これが、このチュートリアルで行うことです。 特定の効果のCSSコードを取得し、DiviBuilderに直接追加します。 これを行う理由は、場合によっては（効果をモジュールの要素にのみ適用したい場合）、提供されているコードをわずかに変更する必要があるためです。

解凍したダウンロードフォルダーに移動し、hover.cssファイルを見つけます。

hover.css

このファイルをメモ帳++などのコードエディターで開くと、すべてのエフェクトが次々に並んでいるのがわかります。 CSSファイルで使用されている名前はWebサイトと同じです。 あなたはウェブサイトに行き、あなたが好きなアニメーションを見ることができます。 その後、CSSファイルに戻って、名前を探すことができます。

hover.csshover.css

インタラクティブな宣伝文モジュールの作成

hover.cssを簡単に使用する方法を示したので、次に、提供されているエフェクトを使用しながらインタラクティブな宣伝文句モジュールを再作成する方法を示します。 念のため、最終結果を見てみましょう。

hover.css

3列の行を追加する

最初に行う必要があるのは、新しいページまたは既存のページの新しいセクションに3列の行を追加することです。 最初の宣伝文句モジュールを追加する方法を説明します。その後、同じ手順を繰り返すことで、宣伝文句モジュールを他の列に追加することもできます。

行を全幅にする

次に行う必要があるのは、行を全幅にすることです。 これを行うには、行の設定を開き、[デザイン]タブに移動します。 [デザイン]タブ内。 Sizingサブカテゴリ内の「MakeThisRowFullwidth」オプションを有効にします。

hover.css

列パディングを適用する

次に行う必要があるのは、行設定の[デザイン]タブにいる間に列のパディングを追加することです。 下にスクロールして、列1の下部のパディングに5％を追加します。

ボックスの影と境界線の半径を列に適用します

そして、行設定内で最後に行う必要があるのは、[詳細設定]タブに移動することです。 [詳細設定]タブで、[列1のメイン要素]まで下にスクロールし、次のCSSコード行をコピーして貼り付けます。 

-webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
-moz-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
border-radius: 6px;

hover.css

それが済んだら、行の設定を閉じることができます。

画像モジュールの追加

次に行うことは、最初の列に画像モジュールを追加することです。 技術的には、これは宣伝文句モジュールの一部ではありませんが、最終的な結果では、それらが一緒に属しているように見えます。 これは主に、すべてのモジュールを集めて互いに適合させる一種のボックスとして列を使用しているためです。

画像をアップロードし、画像モジュールは今のところそのままにしておきます。

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

次に行に追加する必要があるのは、宣伝文句です。 宣伝文モジュールを追加したら、いくつかの変更を加える必要があります。 ヘッダーテキスト、コンテンツテキストを追加し、アイコンを選択することから始めて、[デザイン]タブに移動します。

アイコンのカスタマイズ

[デザイン]タブで最初に目にするのは、[画像とアイコン]サブカテゴリです。 そのサブカテゴリ内で、次の変更が適用されることを確認してください。

  • アイコンの色：#FFFFFF
  • 円のアイコン：はい
  • サークルカラー：＃004370
  • 画像/アイコンの配置：上
  • アイコンのフォントサイズを使用：はい
  • アイコンのフォントサイズ：45px（デスクトップ）、40px（タブレット）、37（電話）

hover.css

ヘッダーテキストをカスタマイズする

同じタブを下にスクロールして、ヘッダーテキストサブカテゴリに次の変更を加えます。

  • ヘッダーフォントサイズ：16（デスクトップとタブレット）、14（電話）
  • ヘッダーテキストの色：＃004370
  • ヘッダー行の高さ：2.2em

hover.css

カスタムマージンを追加

次に、カスタムマージンを宣伝文モジュールに追加する必要があります。

  • トップ：25％
  • 右：5％
  • 左：5％
  • 下：5％

hover.css

宣伝文のタイトルに下マージンを追加する

最後になりましたが、[詳細設定]タブに移動し、宣伝文のタイトルの下余白に「3px」を追加します。

hover.css

モジュールへのHover.cssエフェクトの追加

この投稿の最後の部分では、hover.cssエフェクトを追加します。 最初に画像モジュールと宣伝文モジュールにホバー効果を追加し、この投稿の次の部分では、宣伝文モジュールの1つの要素にのみホバー効果を追加します。

CSSクラスを画像モジュールに追加します

画像の設定を開き、[詳細設定]タブに移動します。 [詳細設定]タブで、使用するホバー効果のCSSクラスを書き留めます。 この場合、CSSクラス名として「hvr-ripple-out」を持つリップルアウト効果を適用しています。 また; これらのクラス名は、zipフォルダーのhover.cssファイル内にあります。

hover.css

CSSクラスを宣伝文モジュールに追加する

同様に、宣伝文句の設定を開き、[詳細設定]タブに移動します。 この場合、シュリンクホバー効果をモジュール全体に適用します。 したがって、CSSクラスフィールドに「hvr-shrink」と入力します。

hover.css

CSSコードを追加する

次に、次のボタンをクリックして、次のCSSコード行をページの設定に追加します。

hover.css

[カスタムCSS]フィールドに次のCSSコード行を配置して続行します。 

.hvr-shrink {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

@-webkit-keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
@keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
.hvr-ripple-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
}
.hvr-ripple-out:before {
content: '';
position: absolute;
border: #004370 solid 6px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
-webkit-animation-name: hvr-ripple-out;
animation-name: hvr-ripple-out;
}

hover.css

これらは、hover.cssファイルにあるものとほぼ同じCSSコード行です。 唯一異なるのは、リップルアウト効果に使用されている境界線の色です。 丸アイコンで使用している色と同じ色です。

宣伝文句モジュール内の個別の要素にHover.css効果を使用する

この宣伝文に追加した3番目の効果は、宣伝文のタイトルにカーソルを合わせた後に表示される線です。 宣伝文モジュールにはさまざまな要素が含まれています。 したがって、リスト内のhover.cssクラスを単純に使用することはできません。 代わりに、CSS IDをモジュールに割り当て、BlurbTitleに特別に割り当てられたCSSクラスを使用する必要があります。

CSSIDをBlurbモジュールに追加します

CSSIDをBlurbモジュールに追加することから始めます。 この場合、「center」を使用しています。

hover.css

CSSコードを追加する

前のCSSコードを配置したのと同じ場所に、次のコード行をコピーして貼り付けます。 

#center.et_pb_blurb_0.et_pb_blurb h4 {
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
}
#center.et_pb_blurb_0.et_pb_blurb h4:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #004370;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before {
left: 0;
right: 0;
}

コード内で使用するクラス名は、モジュールごとに異なります。 これを1つのモジュールにのみ適用する場合は、その特定のモジュールの宣伝文句に割り当てられたクラスを使用する必要があります。

hover.css

ただし、代わりにすべての宣伝文にコードを適用する場合は、次のCSSコード行を使用します。 

#center.et_pb_blurb h4 {
 -webkit-transform: perspective(1px) translateZ(0);
 transform: perspective(1px) translateZ(0);
 box-shadow: 0 0 1px transparent;
 position: relative;
 overflow: hidden;
}
#center.et_pb_blurb h4:before {
 content: "";
 position: absolute;
 z-index: -1;
 left: 50%;
 right: 50%;
 bottom: 0;
 background: #004370;
 height: 4px;
 -webkit-transition-property: left, right;
 transition-property: left, right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before {
 left: 0;
 right: 0;
}

それでおしまい！ これで、同じ手順を使用して同じ結果を得ることができます。 モジュールのクローンを作成し、他の行でもそれらを使用して続行します。

最終的な考え

このDiviチュートリアルでは、hover.cssによって提供される多くのエフェクトの使用方法を主に示しました。 それに加えて、さまざまな効果を使用してWebサイトにインタラクティブな宣伝文句モジュールを作成する方法も示しました。 質問や提案がある場合; 下のコメントセクションにコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

アートワーク/shutterstock.comによる注目の画像