GIFアニメを使ったちょっと味のあるナビゲーション
ムービーファイルのような滑らかな動画がブラウザで当たり前のように見れるようになった今日、
GIFアニメがWeb上で再びブームになっているそうです。
普通の動画が当たり前のように見れる今だからこそ、GIFアニメ独特の、
カクカクとした、手作り感が再評価されているのかもしれません。
またGIFアニメは、ムービーファイルの再生やFlashのような、
クロスブラウザやプラグインなどの壁もなく、
簡単にWebページにアニメーションを載せることができるのも特徴です。
今回は、そのGIFアニメの特徴を活かして、
jQueryやCSS3の滑らかなアニメーションとは違う、
GIFアニメ独特の味を持ったグローバルナビゲーションを作ってみました。
↓こちらがその作ったもの
DEMO
ナビにマウスオーバーすると、画像がjpgからアニメーションのgifファイルに切り替わるという、
シンプルなjQueyで実装しています。
HTML
|
1 2 3 4 5 6 7 8 9 | <div id="nav"> <ul> <li id="home"><a href="#"><img src="images/nav_home.jpg" width="60" height="60" alt="HOME" /></a></li> <li id="access"><a href="#"><img src="images/nav_access.jpg" width="60" height="60" alt="access" /></a></li> <li id="gallery"><a href="#"><img src="images/nav_gallery.jpg" width="60" height="60" alt="access" /></a></li> <li id="about"><a href="#"><img src="images/nav_about.jpg" width="60" height="60" alt="access" /></a></li> <li id="contact"><a href="#"><img src="images/nav_contact.jpg" width="60" height="60" alt="access" /></a></li> </ul> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(function(){ changeImg("home"); changeImg("access"); changeImg("gallery"); changeImg("about"); changeImg("contact"); function changeImg(name){ $("#" + name + " a").mouseover(function(){ $("#" + name + " a img").attr("src", "images/nav_" + name + "_ov.gif"); }); $("#" + name + " a").mouseout(function(){ $("#" + name + " a img").attr("src", "images/nav_" + name + ".jpg"); }); } }); |
ポップな雰囲気の独特な味を出すことができるので、
是非、使ってみてはいかがでしょう。
Author Profile
SHARE
