BLOG 2018.11.19
勝手にサイト紹介！メニューにアンダーラインを用いたおしゃれなwebサイト6選

林

こんにちは！制作部のゆりです　　　　　　　　　　　　　　　　

最近のサイト制作で、
「メニューでマウスオンした際に現れるアンダーラインを、アニメーションさせる」
というエフェクトを取り入れました。
このエフェクトを取り入れたことで、デザイン性が高くなり、
マウスオンをしている位置が、かなり分かりやすくなった気がします。

ひとパターンだけでなく、色々な動きがあるので、
これからたくさん活用する機会がありそうです:-)
実際に、このエフェクトを用いているサイトも多かったので、
いくつか紹介させていただきたいと思います！

ということで今回は、
メニューでアンダーラインアニメーションを実装しているおしゃれなサイト6選です！

アニメーションタイプ⇒「Fade Top」が実装されているサイト。
マウスオーバーすると、テキスト下でアンダーラインが上からフェードインしてくるタイプのアニメーションです。

アニメーションタイプ⇒「Fade Bottom」が実装されているサイト。
先ほどとは逆に、マウスオーバーするとテキスト下でアンダーラインが下からフェードインしてくるタイプのアニメーションです。

アニメーションタイプ⇒「Left to Right」が実装されているサイト。
マウスオーバーするとアンダーラインが左から右に引かれる形で表示され、マウスアウトするとまた左に戻っていくタイプのアニメーションです。

アニメーションタイプ⇒「Left in Right」が実装されているサイト。
マウスオ―バーすると左から右にラインが引かれる形で表示され、
マウスアウトした場合に、左に戻らず右に向かって非表示になるというタイプの、アニメーションです。

アニメーションタイプ⇒「Center」が実装されているサイト。
マウスオーバーすると中央から左右に向かってラインが引かれるタイプのアニメーションです。

こちらのサイトでは、マウスオーバーすると、
丸い点が出るというアニメーションが使用されています。
私が参考にしたサイトには載っていませんが、線の状態から、
cssの”width”や”border-radius”などを調整することによって、実装可能です。

おわりに

今回ご紹介したサイトのアンダーラインアニメーションは、
私が参考にしたサイトに書いてあるcssで、全て対応できると思うので、
気になったものがあれば、ぜひ試してみてください(#^^#)

では、ご閲覧ありがとうございました！
次回もよろしくお願いします。