スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【可変グリッドレイアウトjquery.vgrid.jsいじった感想など。】

Twittre経由で知ったリキッドにレイアウトが変わる際にアニメーションも伴うjQueryのプラグイン「jquery.vgrid.js」。
改めて、実装というか、サンプルをいじってみた感想など。

jquery.vgrid.js関連画像1


同じプラグインを何回も記事にすることはほとんどないのですが、ちょっと感動してしまったので再度エントリー。

元の記事も改めて紹介。Xlune::Blogさんより。

●可変グリッドレイアウトのjQueryプラグイン書いたよ | Xlune::Blog

デモページ
http://blog.xlune.com/2009/09/vgrid/


テキストも入れたサンプルが良いかなぁなんて思ったのですが、テキストコンテンツよりも実装する可能性があるので、自分の描いてるイラスト作品でちょっと試作。

下記の画像がjquery.vgrid.js実装したオリジナルサンプルのキャプチャ画像。(実際のアップしてなくて申し訳ないです。)

可変グリッドレイアウトjquery.vgrid.js 指定したブロック要素がウィンドウ幅に合わせて移動。


広がると、軽快で気持ちのいいアニメーションとともにこんな感じに移動します。

実装方法はサンプルを拝見。

head内の読み込ませソース
・jQuery.js(1.3以降で動く感じ。)
・jjquery.easing.1.3.js
・jquery.vgrid.0.1.6.min.js

script type="text/javascript"内に記述されてる

$("#grid-content")の、idで指定してる要素を、任意のものにしてあげればOK。


あとはそのブロック要素のCSSをいつも通りに指定し。
query.vgridオプションでディレイや時間、アニメーションパターン等もモーションテストして、より快適な動きにデザインしてあげればOKな感じです。

実装してみて、フェードインとeaseOutBounceが気持ち良いかなと思いました。

意外にというか実装は簡単なので、やっていて楽しかったです。第一印象通りに使いやすいjQueryプラグインだと思いました。

可変グリッドレイアウトと言う事で、案件やクライアント、コンテンツを選ぶとは思いますが、あらためて超オススメだと思いました!

★デザイナーの制作実績や画家/作家の作品一覧とかはその個性に上手く合わせた上で、コレ使ってみたいなぁ。
関連記事
スポンサーサイト

コメントの投稿

非公開コメント

プロフィール

DancingCloud

Author:DancingCloud
長野県在住
WEBデザイナー/絵描き/グラフィックデザイナー

好きなもの
フットサル、スボルメ,デスポルチ,マイター,アスレタ,デッサン、モレスキン(モールスキン),XHTML、CSS、レイアウト、デザイン、Flashコンテンツ、スッテッドラー社の鉛筆、ターナー社のアクリルガッシュ、LOMO社のLC-A、LUBITEL166B、SIGMA社のSD10、梨木香歩作品、門倉直人作品、J.R.Rトールキン作品、天沢退二郎作品、カタンの開拓者たち、6ニムト、Ra、ブロックス、散歩、自転車(トーキョーバイク)そして佐久市望月にあるYUSHICAFE(ユーシカフェ)(以下結構たくさんあるので、少しづつ更新予定。)

グリムス(gremz)
最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ご来訪、感謝です。
QRコード
QR
ユーザータグ

アクセス解析
blogram参加中です。
blogram参加中。ブログ持ってる人はより楽しめそう!
blogram投票ボタン
グーバーウォーク
blogram ブログパーツ。エントリーの内容によって変化♪
ブログ内検索
カレンダー
08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Google+1
リンク
RSSフィード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。