オンマウスで動かす様々な画像のアニメーション
//php lightning_the_entry_meta(); ?>
サイトに合った画像ホバー時のエフェクトを取り入れたい!
マウスカーソルを画像にのせた際、簡単なアニメーションがあると「クリックできる」ことが分かります。また、アニメーションで凝った印象や楽しさを感じてもらうこともできますね。
ここでは画像のいろいろなホバーアニメーションを集めてみました!
マウスオーバーで画像を変化させる
-
枠ごと拡大
枠ごと縮小
-
拡大
縮小
カラーからモノクロに
モノクロからカラーに
X軸で回転
Y軸で回転
色をのせる(黒)
上から色をのせる(黒)
-
ぼかす
-
セピア
-
色相
-
画像を変更1
画像を変更2
マウスオーバーでテキストやイラストを表示させる
READ MORE
テキストを表示1
-
READ MORE
テキストを表示2
-
READ MORE
テキストを表示3
-
READ MORE
イラストを表示
-
READ MORE
イラストを表示+角丸
-
マウスオーバーでアニメーション開始
アニメーションの応用やエフェクトを掛け合わせることも可能です。
こちらでご紹介した以外にも気になるアニメーションがありましたらぜひご相談ください!
サイトに合った分かりやすく心地よい操作性を追求したいと思います。