[JS]ページのレイアウトに役立つjQueryのプラグインのまとめ
Post on:2012年8月14日
sponsors
Pinterestのようにパネルを隙間なくレンガ状に配置したり、異なる高さのパネルを同じ高さにしたりなど、ページのレイアウトに役立つjQueryのプラグインを紹介します。
Wookmark
高さの異なる要素を隙間なくレンガ状に配置するだけのシンプルなスクリプト。
Masonry
アニメーションでレイアウトをダイナミックに変更する先駆けとなったスクリプト。
Gridster
パネルをグリッドに沿ってドラッグ&ドロップで移動し、レイアウトを自由に構築できます。
Sliding Resizable Grid
ブラウザのサイズを変更すると、それに伴いレイアウトをアニメーションで変更します。
Isotope
ダイナミックなアニメーションでレイアウトの変更やデータのフィルタリング・ソートをします。
Customizable layout
ページ上のコンテンツをドラッグ&ドロップで移動し、それをクッキーに保存します。
Flex
グリッドに沿ったままアニメーションでパネルを拡大表示します。
grrrid
異なる高さのdiv要素を揃えるだけでなく、均等割付やピクセル単位でグリッドに揃えます。
Equal Heights
高さの異なるdiv要素を同じ高さにします。
Baseline
画像をベースラインに揃えて配置します。
PageSlide
ページ全体を横にスライドし、隠されたコンテンツやリンク先のページを表示します。
Slide Note
FacebookのRecommendations Barのように、ページをスクロールするとパネルをアニメーションで表示します。
The Heads-Up Grid
レスポンシブデザインにも対応した、確認用のグリッドをオーバーレイで表示します。
sponsors
