ポートフォリオサイトのデザインを新しくしてみました♪


ここ最近、サイトの使いやすさを高めるため、
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* -作ったものをまとめておくところ-

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

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

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

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


こちらの記事もおすすめです

このブログで人気の記事です

コメント(Facebookのコメント機能を利用しています)

»

«


↓その他運営中のサイトのご紹介

Fireworksマニア Webサイトからカラーを抽出!分析!Web Site Color Picker PHOTO STOCKER -高解像度の無料写真素材- 壁紙カレンダー -デスクトップを飾る、サイズ豊富なデスクトップ壁紙- シンプルパターン研究所 -PhotoshopやFireworksで便利に使えるテクスチャ素材-
スタイルシート見出しメーカー -好きな色で作れる、あなた用のCSS見出し- ビビッドカラーズ -キュートなホームページ素材配布サイト- Android用の壁紙無料ダウンロードサイト Webデザイナー山口有由希のポートフォリオサイト