マウスオーバー時にサムネイルがポップアップするWebデザイン事例

デモ1

デモ

今回はマウスオーバー時にホバーエフェクトを発生させるWebデザイン事例をご紹介します。

リンクの上にオンカーソルした際、特別なエフェクトを伴ってサムネイル画像がポップアップで表示されるというものです。

このアイデアを使ったシンプルな例としてFugeのWebサイトが、またより複雑な例としてLouis AnsaのポートフォリオやZhenya Rynzhukの Blown Art Works and News Platformがあります。

※なお、このアニメーションはTweenMaxを利用しており、古いブラウザでは対応していない場合があるためご注意ください。

マウスオーバー時のホバーエフェクト例

デモ1

デモ2

デモ3

このホバーエフェクトの事例が、あなたに良いインスピレーションを与えることを祈っています!

(原文:Mary Lou 翻訳:じきる)

 

あわせて読みたい!▼

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
デザイナー副業案件
Workship