マウスオーバーをデザインする
ウェブデザインには欠かせないリンク要素。
メニューやボタン、画像、テキストのリンクなどちょっとした工夫で、ユーザーがリンクをマウスオーバーしたときに小さな驚きと楽しみを与えられるのではないでしょうか？
今回は、そんなマウスオーバーをデザインするアイデアをいくつかまとめてみました。
Realistic Hover Effect With jQuery — Adrian Pelletier
マウスオーバーすると、オブジェクトが浮かび上がり、反射や影の部分も小さくなります。とってもリアルなエフェクトですね。
Advanced CSS Menu Trick
メニューにマウスオーバーすると、選択されていないメニューにはぼかしがかかります。おもしろいアイデアですね。
Color Fading Menu with jQuery
メニューにマウスオーバーすると、色がフェードインしてくるメニューです。
jQuery hover fade method
ボタンにマウスオーバーすると、フェードインされてONが浮き上がってきます。マウスアウトでフェードアウトします。
Advanced CSS Menu
マウスオーバーで手描き風メニューにエフェクトがかかります。
Using jQuery for Background Image Animations
マウスオーバーでメニューがアニメーション。動きが軽快で気持ちいいです。
Sexy CSS Hover Button
マウスオーバーでボタンが押し込まれたイメージに切り替わります。
Animated Hover Demonstration
マウスオーバーしているメニューがハイライトされます。マウスを他のメニューにスライドすると、ハイライトがアニメーションでついてきます。
The hoverFlow Plugin – A Solution to Animation Queue Buildup in jQuery
マウスオーバーでメニューが右側にスライドします。シンプルですがわかりやすいメニューになりそうですね。
HoverAccordion jQuery Plugin
メニューにマウスオーバーすると、サブメニューがスライドして表示されます。他のメニューにマウスオーバーすると開いているメニューが閉じられます。
hoverIntent jQuery Plug-in
ボックスにマウスオーバーすると、そのボックスが下方向に拡大されます。メニューに使えそうです。
jquery-glow
テキストにマウスオーバーするとテキストカラーがフェードします。マウスアウトでフェードアウトしてくれます。
CSS element hover effect
CSSで簡単にマウスオーバーをデザインできるサンプルが紹介されています。
jQuery columnHover plugin
テーブルのカラムにマウスオーバーするとカラムをハイライトしてくれます。スペック表などに使えそう。
Fancy Thumbnail Hover Effect w/ jQuery
サムネイル画像にマウスオーバーすると画像を拡大してポップアップしてくれます。
Maximize the Use of Hover
画像にマウスオーバーすると複数のテキストリンクのボックスを表示してくれます。
CSS hover effect
ボックスにマウスオーバーするとボックスがハイライトされます。いろいろ使い道がありそうですね。
Animate a hover with jQuery
ギャラリーやポートフォリオ系のサイトに便利なのではないでしょうか。画像にマウスオーバーすると詳細がスライドしてきます。
CSS swap hover effect
こちらもイメージにマウスオーバーすると詳細が表示されます。
Hover Effects in Web Design: Best Practices and Examples
マウスオーバーをうまくデザインに組み込んでいるウェブサイトをまとめられています。
|
|
|
8月 11th, 2009 at 10:02 PM
JavaScriptのマウスオーバーで変化するコンポーネント…
JavaScriptのコンポーネントは最近はきれいなものがたくさん出てきている。 マウスオーバーをデザインする ひとつの問題点は汎用性がないことと、きれいにデザインするためには画像が必須だということ。HTML5やCSS3が普及すればこの状況は変わってくるからそのときにはJ…
8月 12th, 2009 at 2:42 AM
[jQuery]自由自在！マウスオーバーで背景画像と文字色がフェードで切り変わるメニューColor Fading Menu…
メニューにマウスオーバーすると、背景画像と文字色がフェードで切り変わるメニュー「Color Fading Menu」のご紹介記事です。
Color Fading Menu with jQuery
デモ
COoooooooooooooooOL!!!かっこよいですね……
10月 2nd, 2009 at 4:20 AM
[...] マウスオーバーをデザインする 10月 2 Photoshop [...]
12月 27th, 2009 at 12:56 PM
[...] そう考えるようになりました。 けれどできない！！ http://www.designwalker.com/2009/08/hover.html 明日には仕上げてみせる！！ « [...]