最近のWebサイトで使われている、レスポンシブ対応のページレイアウトに役立つスクリプトのまとめ
Post on:2016年2月12日
sponsors
レスポンシブ対応のカード型レイアウト、中央で分割されたレイアウト、動画や画像や幾何学模様を背景に配置したり、画像やコンテナのサイズをデバイスごとに最適化したりなど、ページのレイアウトに役立つスクリプトを紹介します。
stackgrid.adem.js -GitHub
デモページ
HTMLの実装は非常にシンプルで、divで実装した各コンテナのカラム数・幅・溝をアニメーションで変更します。レスポンシブ対応で、コンテナの増減にも対応。
単体スクリプト・MITライセンス
Minigrid
Minigrid -GitHub
デモページ
レスポンシブ対応のカード型レイアウトを実装できるシンプルで超軽量なスクリプト。アニメーションでレイアウトが変更する系はこのスクリプトが圧倒的に簡単で軽量です。
単体スクリプト・MITライセンス
Split Layout
Split Layout -GitHub
デモページ
最近増えてきた中央分割のレイアウト。サムネイルをクリックすると、それぞれアニメーションでコンテンツが表示されます。
単体スクリプト・独自ライセンス
水平・垂直に位置が変更可能な区切りを設定できるスクリプト。3分割や水平と垂直の組み合わせにも対応。
単体スクリプト・MITライセンス
アイテムをダイアモンド状に配置するスクリプト。レスポンシブ対応で、サイズや溝も簡単に設定できます。
jQueryのプラグイン・MITライセンス
Tilted Page Scroll -GitHub
デモページ
縦長ページの各コンテンツを3Dに傾けて、アニメーションで表示します。
jQueryのプラグイン・GNUライセンス
画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できます。
jQuery/Zeptoのプラグイン・MITライセンス
.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できます。
jQueryのプラグイン・MITライセンス
背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できます。
単体スクリプト・MITライセンス
縦長ページのセクションごとにフルスクリーンでコンテンツを表示させるスクロールページを作ります。
jQueryのプラグイン・MITライセンス
縦長ページでスクロールする時に、ちょうどいい位置にスナップさせます。
jQueryのプラグイン・MITライセンス
画像をデスクトップではそのまま表示し、スマホやタブレットなどでは指定した箇所を中心にクロップして表示します。
jQueryのプラグイン・MITライセンス
レスポンシブ対応で、高さの異なるパネルを揃えたり、成り行きにすることができます。
jQueryのプラグイン・MITライセンス
matchHeight
matchHeight -GitHub
デモページ
異なる高さを単に揃えるだけでなく、グルーピングや列に応じて揃えることも可能です。
jQueryのプラグイン・MITライセンス
高さの異なる要素をレンガ状に隙間なく並べるだけのシンプルなスクリプト。今年リリースされた2.0からjQuery依存ではなくなり、単独で動作します。
単体スクリプト・MITライセンス
レンガ状に並べる系の高機能なスクリプト。指定したアイテムのドラッグ、アイテムのフィルタリングなどにも対応しています。
jQueryのプラグイン・MITライセンス
sponsors
