Blog

GIFアニメを使ったちょっと味のあるナビゲーション

2013.01.30Cat:webデザイン デザイナー

ムービーファイルのような滑らかな動画がブラウザで当たり前のように見れるようになった今日、

GIFアニメがWeb上で再びブームになっているそうです。

普通の動画が当たり前のように見れる今だからこそ、GIFアニメ独特の、

カクカクとした、手作り感が再評価されているのかもしれません。

 

またGIFアニメは、ムービーファイルの再生やFlashのような、

クロスブラウザやプラグインなどの壁もなく、

簡単にWebページにアニメーションを載せることができるのも特徴です。

 

今回は、そのGIFアニメの特徴を活かして、

jQueryやCSS3の滑らかなアニメーションとは違う、

GIFアニメ独特の味を持ったグローバルナビゲーションを作ってみました。

 

↓こちらがその作ったもの
DEMO
ナビにマウスオーバーすると、画像がjpgからアニメーションのgifファイルに切り替わるという、

シンプルなjQueyで実装しています。

 

HTML

 

 

jQuery

 

ポップな雰囲気の独特な味を出すことができるので、

是非、使ってみてはいかがでしょう。

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ