なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！

今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」！

昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読！5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する！これは本当にすごい！！

まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。

少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。

さらに狭めてみると、右のサイドバーが完全に無くなった。

さらに狭めると今度は左のサイドバーが消えた。

ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。

これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さんも是非下記リンクをブラウザで開いてウィンドウの伸縮をしながら要素の感動的な動きを楽しむべし！！

NHKスタジオパーク

使われていたのは「jQuery Masonry」というプラグインだ！

ところで、これはどのようにしてこれほどスムーズに動作させているのか気になる。気になって仕方ない。気になりすぎて鼻血が出そう。という訳で、ソースを色々とほじくり回していたら、「jQuery Masonry」というプラグインが使われていることが分かった。

Javascriptにしては随分と滑らかな動きをするなあ、と思っていたらどうやらGPUアクセラレーターが利用できるCSS3アニメーションが使われているらしい。道理でサクサク動くわけだ…。

Animating with CSS Transitions · jQuery Masonry

これを使って何かページ作ってみたいね！今後、レスポンシブ・デザインのウェブページを実装する機会がある人は、試してみてはいかがだろうか！