Diviの使い方3、ホバーの設定【初心者必見】

Diviの使い方3、ホバーの設定

こんにちは、ナオミです。

今回はホバーの設定を紹介します。

Diviの使い方、ホバーの設定2

こんな感じのエフェクトをマウスカーソルがホバーした時に作ることができます。

これはCSSの:hoverを使っています。ですが、DiviではCSSを一切使わずともこの設定ができてしまいます。

画像モジュールを使って、この上のホバーのアニメーションをどう作るのか説明します。

Diviモジュールでホバー前の初期値を設定する

まずは画像モジュールで適当な画像を入れます。

Diviの使い方、ホバーの設定の仕方1

次にホバー前の初期値を設定します。

マウスのカーソルが上に来る前の状態です。

ボーダーを入れる

Diviの使い方、ホバーの設定2

こんな感じでボーダーを入れました。

色を白黒にする

Diviの使い方、ホバーの設定3。Filterの彩度を0%にしました。

Filterの彩度を0%にしました。

これで準備完了です。

Diviモジュールでホバーを設定する

それでは次にホバー状態のスタイルを設定します。

ボーダーの幅のホバー設定

まず先程、ボーダーの幅をセットした境界の設定のところに戻ります。

Diviの使い方、ホバーの設定画面を出す1

ボーダー幅の設定のところにマウスを持っていくと、この矢じるしのアイコンが出ますので、それをクリックします。

Diviの使い方、ホバーの設定画面を出す3

初期設定とHoverというタブが出てきます。

ここでHoverをクリックします。

そしてボーダーの幅の値を0にします。

Diviの使い方、ホバーの設定4

そうすると、画像のボーダーが無くなります。

次に初期設定のタブに戻してみます。

Diviの使い方、ホバーの設定画面、初期設定タブ

これでボーダーの幅のホバーの設定は完了です。

Filterの彩度のホバー設定

次に同じようにFilterの彩度に行き、ホバーの設定を開きましょう。

Diviの使い方、彩度のホバー設定画面

そしてHoverタブで彩度を100%にセットします。

これで準備は整いました。

保存してビジュアルビルダーを終了しないと、ホバーをテストできない

保存してビジュアルビルダーを終了しましょう。

そしてマウスカーソルを画像の上にもっていきましょう。

Diviの使い方、ホバーの設定2

こんな感じのエフェクトが見れたら、成功です!

Diviモジュールのホバーアニメーションのスピードを変える

このアニメーションのスピードを変えることもできます。

このモジュールの設定画面の『詳細』→『Transitions』に行きます。

Diviの使い方、ホバーアニメーションのスピードをコントロールする方法

Transition Duration

これはアニメーション全体でどのくらいの時間がかかるのかというのを設定します。

1000msが1秒です。

Transition Delay

これはアニメーションが始まる前に、どのくらいの時間を待つのかというのを設定します。

例えばこの値を500msに設定すると、ホバー後に0.5秒待ってからアニメーションが始まります。

Transition Speed Curve

これはアニメーションのスピードの上がり下がりを設定します。

  • ease-in ゆっくりアニメーションが始まって、どんどん加速します
  • ease-out 最高速でアニメーションが始まり、どんどん減速します
  • ease-in-out ゆっくり始まり、加速してアニメーションの中間で最高速になり、最後はゆっくり終了します
  • ease ease-in-out とほぼ同じですが、始まりの方がわずかに終了時のスピードより速いアニメーションです
  • 線形 一定の速度でアニメーションします

色々と試してみましょう。


Diviを使えばこんな簡単に、ホバーの設定だけでなくアニメーションまでコントロールできてしまいます。

色々と作ってみましょう!

そして質問がありましたら、どうぞこの記事にコメントするか、Diviサロンでお願いします。完全無料です。

Diviサロンに参加する

それではまた!

「Diviの使い方3、ホバーの設定【初心者必見】」に2件のコメントがあります

  1. ピンバック: Diviの使い方2、モジュール設定の基本【初心者必見】

  2. ピンバック: Diviでマウスホバーで画像をスワップする方法

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です