そもそもホバーアニメーションって?
今回のお題は、
「ホバーアニメーション」です!
聞き慣れない方もいるかと思いますが、おそらく多くの方は見たことがあるであろうアニメーションです。
実際に動きを見てみましょう。下のボタンにカーソルを当ててみてください。
Focus Here!文字の色や背景色が変化しましたか?
このように、ホバーアニメーション(hover animation)とは、
ある要素にマウスカーソルが重なったときのアニメーションのことを指します。
どんな時に使うの?
リンクボタンを設置する際に、度々設定します。
設定しなかった場合を試しに見てみましょう。
ただリンクを追加しただけだと、このように表示されます。
※リンク先に飛ばないようにする設定だけしています。
一般的なリンク味気なかったり、どこまでがリンクボタンの範囲か分かりづらかったり…と、このままでは使いづらいです。
そのため、デザイン性を追加したり、ユーザーにとって使いやすくしたりするために、デザインの装飾以外にホバーアニメーションを追加することがあります。
どうやって実装しているの?
/* HTML */
<a class="hoverbox">Focus Here!</a>
/* CSS */
.hoverbox{
display: block;
width: 80%;
max-width: 250px;
padding: 1em 0;
border: 2px solid white;
margin: 20px 0;
background-color: #2E2B2B;
color: white;
font-size: 16px;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: .3s;
}
.hoverbox:hover{
border: 2px solid #2E2B2B;
background-color: white;
color: #2E2B2B;
}
hoverを設定すると、マウスカーソルが当たったときのCSSの設定ができます。
transitionを設定しておくと、すぐに切り替わらず、スッと変化するような設定が可能です。
まとめ
- ホバーアニメーションは、ある要素にマウスカーソルが重なったときのアニメーションのこと。
- デザイン性を追加したり、ユーザーにとって使いやすくしたりするために設定される。
次回は、今回ご紹介したホバーアニメーションの例をいくつかご紹介します!