VIVID COLORS + BLOG -福岡で働くWebデザイナーのブログ-

この記事は 約 4 分 で読めます。

ここ最近、サイトの使いやすさを高めるため、
jQueryを便利に使っております。

が。
ある日突然、jQueryを多用したまるでFLASHにのような動きをつけたサイトを作ってみたくなり…。
いえ、普通に普通にFLASHでやればいいんですけど、あえてjQueryでやってみたくなっちゃったんです…！！！

ということで思い立ったら吉日。
ポートフォリオサイトで実験してみましたー！

*YUKI YAMAGUCHI Design Portfolio* -作ったものをまとめておくところ-

ちなみにこのサイトもベースはWordPressですよー☆
いろいろぐりんぐりんと動く仕掛けになっております。

IEでも一通り（6、7、8）確認したので
すこしおかしな部分があるかもですが、大体大丈夫なはず！です。

試してみたかったjQueryでできるデザイン表現を
使えるだけガンガン使ってみました♪

制作にあたっては、
それぞれ、以下のサイトなどを参考に、
プラグインを使用・カスタマイズなどさせていただきました♪

背景のスクロール部分

http://www.devirtuoso.com/2009/07/how-to-build-an-animated-header-in-jquery/

トップのメニューのアニメーション部分

http://jqueryglobe.com/article/animated-menu

各ページのメニューのアニメーション・アイコンのアニメーション部分

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/

Portfolioページの、異なる高さの要素の可変並べ替えの処理

（Portfolioページでブラウザのサイズを変えてみてください）
http://desandro.com/resources/jquery-masonry/

スムーズスクロール

（フッターのPAGE TOPをクリックしてみてください）

http://hisasann.com/housetect/2009/03/jquerysmoothscroll.html

その他に、画像にマウスカーソルをあわせたときの
パチンとウインクする動きなんかもjQueryです。

業務でやることはないだろうけど、楽しかったです♪

よろしければぜひ見てみてくださいー♪

*YUKI YAMAGUCHI Design Portfolio* -作ったものをまとめておくところ-

どうでしょうか、ちょっと重いでしょうか…いかがですか？？
あまり多用しすぎると重くなりますよね…。
みなさんの環境ではいかがですか？

こんなに一度に１つのサイトに多用する事はないにしても
ナビゲーション部分などにはこれからもjQueryを
上手くデザインのポイントとしても使っていきたいです。

ちょっとした動きでも、
あればサイトのいいアクセントになりますよね☆

ほかにもいろいろ実際に試して使い勝手がよく、
よさげなアニメーション等があるので後日またご紹介しますね♪