画像にマウスを乗せた時に、なんらかの変化を表現するマウスオーバーエフェクト。
インパクトもあり、エンドユーザーに印象をのこせますね。
よく使うのはボタン関連。ボタン以外にもアイデア次第で様々な箇所で利用できます。
種類もいろいろあります。僕がいいなと思うものをご紹介します。
Simple Tile Hover Effect
画像にマウスオーバーで、タイトルと説明文を表示できる。一番使用頻度が高いかな。
See the Pen
Simple Tile Hover Effect by Chris Deacy (@chrisdothtml)
on CodePen.
3D hover plane effect
マウスを各要素が追随します(-_-;)。使い方によっては面白い。
See the Pen
3D hover plane effect by Rian Ariona (@ariona)
on CodePen.
Direction-aware 3D hover effect (Concept)
マウスを動かした方向に、エフェクト発動！
See the Pen
Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado)
on CodePen.
News Cards – CSS only
マウスオーバーで説明文を表示。これも使えますね。
See the Pen
News Cards – CSS only by Aleksandar Čugurović (@choogoor)
on CodePen.
Opening type
パカッと開くエフェクト。組み合わせると面白い。
See the Pen
Opening type by Diego Pardo (@diegopardo)
on CodePen.
Button Hover
シンプルだけど、汎用性の高いエフェクト
See the Pen
Button Hover by Katherine Kato (@kathykato)
on CodePen.
まだまだこの他にもたくさんエフェクトってありますね。
自分なりにカスタマイズして使用するのも面白いですね。
