Diviのホバーの設定【初心者必見】
こんにちは、ナオミです。
今回はDiviのホバーの設定を紹介します。
こんな感じのエフェクトをマウスカーソルがホバーした時に作ることができます。
これはCSSの:hoverを使っています。ですが、DiviではCSSを一切使わずともこの設定ができてしまいます。
画像モジュールを使って、この上のホバーのアニメーションをどう作るのか説明します。
Diviモジュールでホバー前の初期値を設定する
まずは画像モジュールで適当な画像を入れます。
次にホバー前の初期値を設定します。
マウスのカーソルが上に来る前の状態です。
ボーダーを入れる
こんな感じでボーダーを入れました。
色を白黒にする
Filterの彩度を0%にしました。
これで準備完了です。
Diviモジュールでホバーを設定する
それでは次にホバー状態のスタイルを設定します。
ボーダーの幅のホバー設定
まず先程、ボーダーの幅をセットした境界の設定のところに戻ります。
ボーダー幅の設定のところにマウスを持っていくと、この矢印のアイコンが出ますので、それをクリックします。この矢印アイコンがhoverの設定ボタンです。
初期設定と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の基本を学びたい方におすすめの記事はこちら
NoCodeWebではDivi初心者の方でもスムーズにWebサイト制作が始められるよう、様々なチュートリアル記事を随時更新しております。Diviの使い方をコラから学びたい方は必見です。
ゼロから始められるDivi入門チュートリアル【サーバーもDiviも不要】
Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。
コードを書かないウェブ制作を目指すコミュニティ『TOFUラボ』
Diviの最新情報を知りたいなら、ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか？
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。
最新情報だけではなく技術的な質問も飛び交っています。
また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。
『TOFUラボ』の紹介はこちらです
興味があれば、是非参加してくださいね。
入会してから７日間は無料で合わないなと思えばいつでもキャンセル可能です。
それではまた！
