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

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

Create Your Own Sliding Resizable Grid
デモページ

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

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

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

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

HTML

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