こんにちは、ナオミです。
今回はDiviのホバーの設定を紹介します。
こんな感じのエフェクトをマウスカーソルがホバーした時に作ることができます。
これはCSSの:hoverを使っています。ですが、DiviではCSSを一切使わずともこの設定ができてしまいます。
画像モジュールを使って、この上のホバーのアニメーションをどう作るのか説明します。
コンテンツ
Diviモジュールでホバー前の初期値を設定する
まずは画像モジュールで適当な画像を入れます。
次にホバー前の初期値を設定します。
マウスのカーソルが上に来る前の状態です。
ボーダーを入れる
こんな感じでボーダーを入れました。
色を白黒にする
Filterの彩度を0%にしました。
これで準備完了です。
Diviモジュールでホバーを設定する
それでは次にホバー状態のスタイルを設定します。
ボーダーの幅のホバー設定
まず先程、ボーダーの幅をセットした境界の設定のところに戻ります。
ボーダー幅の設定のところにマウスを持っていくと、この矢じるしのアイコンが出ますので、それをクリックします。
初期設定とHoverというタブが出てきます。
ここでHoverをクリックします。
そしてボーダーの幅の値を０にします。
そうすると、画像のボーダーが無くなります。
次に初期設定のタブに戻してみます。
これでボーダーの幅のホバーの設定は完了です。
Filterの彩度のホバー設定
次に同じようにFilterの彩度に行き、ホバーの設定を開きましょう。
そしてHoverタブで彩度を100%にセットします。
これで準備は整いました。
保存してビジュアルビルダーを終了しないと、ホバーをテストできない
保存してビジュアルビルダーを終了しましょう。
そしてマウスカーソルを画像の上にもっていきましょう。
こんな感じのエフェクトが見れたら、成功です！
Diviモジュールのホバーアニメーションのスピードを変える
このアニメーションのスピードを変えることもできます。
このモジュールの設定画面の『詳細』→『Transitions』に行きます。
Transition Duration
これはアニメーション全体でどのくらいの時間がかかるのかというのを設定します。
1000msが1秒です。
Transition Delay
これはアニメーションが始まる前に、どのくらいの時間を待つのかというのを設定します。
例えばこの値を500msに設定すると、ホバー後に0.5秒待ってからアニメーションが始まります。
Transition Speed Curve
これはアニメーションのスピードの上がり下がりを設定します。
ease-inゆっくりアニメーションが始まって、どんどん加速しますease-out最高速でアニメーションが始まり、どんどん減速しますease-in-outゆっくり始まり、加速してアニメーションの中間で最高速になり、最後はゆっくり終了しますeaseease-in-outとほぼ同じですが、始まりの方がわずかに終了時のスピードより速いアニメーションです線形一定の速度でアニメーションします
色々と試してみましょう。
Diviを使えばこんな簡単に、ホバーの設定だけでなくアニメーションまでコントロールできてしまいます。
色々と作ってみましょう！
Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。
そして質問がありましたら、どうぞこの記事にコメントするか、Diviサロンでお願いします。完全無料です。
それではまた！
