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

NHKスタジオパーク

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

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


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

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

さらに狭めてみると、右のサイドバーが完全に無くなった。
NHKスタジオパーク

さらに狭めると今度は左のサイドバーが消えた。
NHKスタジオパーク

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

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

NHKスタジオパーク

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

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

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

Animating with CSS Transitions · jQuery Masonry


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

オススメ
nhk_studiopark_top.png

gori.meの最新情報をチェック!!

  1. iPhone-6s-In-Depth-Review-15.jpg
    「iPhone 6s」の電源が突然落ちる不具合、製造工程に問題があったと判明
  2. iphone6s-shutdown.png
    Apple、「iPhone 6s が突然シャットダウンする問題に対するプログラム」ページを公開、シリアル番号で確認可能に
  3. macbook-pro-2016-gpu-freaking-out
    「MacBook Pro (Late 2016)」のGPUに関する不具合、影響範囲が拡大中
  4. 25-more-hidden-ios10-features.png
    「iOS 10.2 Beta 5 / Public Beta 5」、配信開始
  5. delete-iphone-else-top.jpg
    【保存版】iPhoneのストレージ容量不足を劇的に解消する7つの方法