[JS]ブラウザのサイズに合わせてレイアウトがアニメーションで変更されるスクリプト -Sliding Resizable Grid

ブラウザのサイズが変更されると、レイアウトがスライドのアニメーションで変更されるスクリプトをHackito Ergo Sumから紹介します。

Create Your Own Sliding Resizable Grid
デモページ

上記デモページでブラウザのサイズを小さくすると、下記のようにレイアウトが変更されて表示されます。

上記デモのブラウザサイズを変更

サイズが変更される際は、パネルはスライドのアニメーションを伴って移動します。

各パネルはdiv要素で実装されています。

HTML

<div class="slidegrid">
<div class="cell bigcell">Big Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>

Sliding Resizable GridはjQueryのプラグインのため、実装にはjquery.jsが必要です。

Post on:2010年2月1日