Blog スタッフブログ

■ホバーアニメーションとは？

WEBサイトの各要素にはカーソルを合わせた時に何らかの変化を生じさせる、ホバーアニメーションを設定することができます。

例えばこのサイトでもTOPページの”サービス内容”の項目にて、コンテンツにマウスカーソルを合わせるとそのコンテンツのみ半透明になりますが、こういった動きが該当します。

この場合、別ページにリンクできるという動きがユーザーに分かりやすくなるというメリットがあります。

他にも、なるべくページ内のスクロール量を抑えつつ多くの情報量をサイト内に詰め込めるというメリットも。

■ホバーアニメーションの例

■ホバーアニメーションのメリット

カーソルを合わせた時のみ見た目が変化するという性質上、ページ内のスクロール量を抑えつつなるべく多くの情報量をサイト内に詰め込めます。

また別ページへのリンク先を設定している箇所が視覚的に分かりやすくなるメリットもあります。

以下のHTML構造とCSSを用いることで、「不透明度70%、切り替わり速度0.8秒」のアニメーション設定が実装できます。

■HTML
<a class="button">
ボタンのテキストが入ります
</a>

■CSS
.button{
display:block;
transition:0.8s;
}

.button &:hover{
opacity:0.7;
transition:0.8s;
}