LINEで送る
Pocket

ウェブデザインには欠かせないリンク要素。

メニューやボタン、画像、テキストのリンクなどちょっとした工夫で、ユーザーがリンクをマウスオーバーしたときに小さな驚きと楽しみを与えられるのではないでしょうか?

今回は、そんなマウスオーバーをデザインするアイデアをいくつかまとめてみました。

Realistic Hover Effect With jQuery — Adrian Pelletier

マウスオーバーすると、オブジェクトが浮かび上がり、反射や影の部分も小さくなります。とってもリアルなエフェクトですね。

Realistic Hover Effect With jQuery — Adrian Pelletier

Advanced CSS Menu Trick

メニューにマウスオーバーすると、選択されていないメニューにはぼかしがかかります。おもしろいアイデアですね。

サンプルはこちら

Advanced CSS Menu Trick

Color Fading Menu with jQuery

メニューにマウスオーバーすると、色がフェードインしてくるメニューです。

サンプルはこちら

Color Fading Menu with jQuery

jQuery hover fade method

ボタンにマウスオーバーすると、フェードインされてONが浮き上がってきます。マウスアウトでフェードアウトします。

jQuery hover fade method

Advanced CSS Menu

マウスオーバーで手描き風メニューにエフェクトがかかります。

サンプルはこちら

Advanced CSS Menu

Using jQuery for Background Image Animations

マウスオーバーでメニューがアニメーション。動きが軽快で気持ちいいです。

サンプルはこちら

Using jQuery for Background Image Animations

Sexy CSS Hover Button

マウスオーバーでボタンが押し込まれたイメージに切り替わります。

Sexy CSS Hover Button

Animated Hover Demonstration

マウスオーバーしているメニューがハイライトされます。マウスを他のメニューにスライドすると、ハイライトがアニメーションでついてきます。

Animated Hover Demonstration

The hoverFlow Plugin – A Solution to Animation Queue Buildup in jQuery

マウスオーバーでメニューが右側にスライドします。シンプルですがわかりやすいメニューになりそうですね。

The hoverFlow Plugin - A Solution to Animation Queue Buildup in jQuery

HoverAccordion jQuery Plugin

メニューにマウスオーバーすると、サブメニューがスライドして表示されます。他のメニューにマウスオーバーすると開いているメニューが閉じられます。

HoverAccordion jQuery Plugin

hoverIntent jQuery Plug-in

ボックスにマウスオーバーすると、そのボックスが下方向に拡大されます。メニューに使えそうです。

hoverIntent jQuery Plug-in

jquery-glow

テキストにマウスオーバーするとテキストカラーがフェードします。マウスアウトでフェードアウトしてくれます。

jquery-glow

CSS element hover effect

CSSで簡単にマウスオーバーをデザインできるサンプルが紹介されています。

CSS element hover effect

jQuery columnHover plugin

テーブルのカラムにマウスオーバーするとカラムをハイライトしてくれます。スペック表などに使えそう。

jQuery columnHover plugin

Fancy Thumbnail Hover Effect w/ jQuery

サムネイル画像にマウスオーバーすると画像を拡大してポップアップしてくれます。

サンプルはこちら

Fancy Thumbnail Hover Effect w/ jQuery

Maximize the Use of Hover

画像にマウスオーバーすると複数のテキストリンクのボックスを表示してくれます。

サンプルはこちら

Maximize the Use of Hover

CSS hover effect

ボックスにマウスオーバーするとボックスがハイライトされます。いろいろ使い道がありそうですね。

サンプルはこちら

CSS hover effect

Animate a hover with jQuery

ギャラリーやポートフォリオ系のサイトに便利なのではないでしょうか。画像にマウスオーバーすると詳細がスライドしてきます。

サンプルはこちら

Animate a hover with jQuery

CSS swap hover effect

こちらもイメージにマウスオーバーすると詳細が表示されます。

 CSS swap hover effect

Hover Effects in Web Design: Best Practices and Examples

マウスオーバーをうまくデザインに組み込んでいるウェブサイトをまとめられています。

Hover Effects in Web Design: Best Practices and Examples

Similar Posts:

LINEで送る
Pocket


4 Thoughts on “マウスオーバーをデザインする”

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です