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

jQueryをゴリゴリ使って
まるでFLASHにのような動きをつけたサイトを作ってみたくなり…。
勉強もかねて、週末ポートフォリオサイトのテーマを作り替えてみました♪

ここ最近、サイトの使いやすさを高めるため、
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を
上手くデザインのポイントとしても使っていきたいです。

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

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

「ポートフォリオサイトのデザインを新しくしてみました♪」への8件のフィードバック

  1. ピンバック: webdesignStatio
  2. これがwordpressとは。という程のFLASHサイト!

    可能性が無限大だな~。
    あ。飯塚の山の中で見ると回線の関係でちょっとキツカッタっす。
    ・・というか早く光回線きてぇ~ww

  3. こんにちは。
    すごく素敵なポートフォリオだと思います!
    プラグインもどんなのが使われてるか分かってとっても嬉しいです。勉強させていただきます!

  4. FLASH”風”なのですー!
    全部jQueryです☆

    やっぱりカクカクしますよねー><
    ちょっと使いすぎましたw

  5. > Quarter4Nori さん

    わわ!コメントありがとうございますー!!!
    うれしいです><

    こちらこそいつもブログで勉強させていただいてます!
    更新楽しみにしていますー!!
    今後もよろしくお願いします♪^^

  6. ピンバック: ttbookmark

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です