マウスオーバーをデザインする

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

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

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

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

デザインblogランキング

コメント 4 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



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

  1. Perl入門〜サンプルコードによるPerl入門〜 Says:

    JavaScriptのマウスオーバーで変化するコンポーネント…

     JavaScriptのコンポーネントは最近はきれいなものがたくさん出てきている。 マウスオーバーをデザインする  ひとつの問題点は汎用性がないことと、きれいにデザインするためには画像が必須だということ。HTML5やCSS3が普及すればこの状況は変わってくるからそのときにはJ…

  2. Ys DESIGN Says:

    [jQuery]自由自在!マウスオーバーで背景画像と文字色がフェードで切り変わるメニューColor Fading Menu…

    メニューにマウスオーバーすると、背景画像と文字色がフェードで切り変わるメニュー「Color Fading Menu」のご紹介記事です。

    Color Fading Menu with jQuery
    デモ
    COoooooooooooooooOL!!!かっこよいですね……

  3. マウスオーバーをデザインする | WEB制作.Hack Says:

    […] マウスオーバーをデザインする 10月 2 Photoshop […]

  4. 日記 » 新しく決めたこと Says:

    […] そう考えるようになりました。 けれどできない!! http://www.designwalker.com/2009/08/hover.html 明日には仕上げてみせる!! « […]

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ