最近のWebサイトで使われている、レスポンシブ対応のページレイアウトに役立つスクリプトのまとめ

レスポンシブ対応のカード型レイアウト、中央で分割されたレイアウト、動画や画像や幾何学模様を背景に配置したり、画像やコンテナのサイズをデバイスごとに最適化したりなど、ページのレイアウトに役立つスクリプトを紹介します。

デモのアニメーション

stackgrid.adem.js -GitHub
デモページ

HTMLの実装は非常にシンプルで、divで実装した各コンテナのカラム数・幅・溝をアニメーションで変更します。レスポンシブ対応で、コンテナの増減にも対応。
単体スクリプト・MITライセンス

デモのアニメーション

Minigrid
Minigrid -GitHub
デモページ

レスポンシブ対応のカード型レイアウトを実装できるシンプルで超軽量なスクリプト。アニメーションでレイアウトが変更する系はこのスクリプトが圧倒的に簡単で軽量です。
単体スクリプト・MITライセンス

デモのキャプチャ

Split Layout
Split Layout -GitHub
デモページ

最近増えてきた中央分割のレイアウト。サムネイルをクリックすると、それぞれアニメーションでコンテンツが表示されます。
単体スクリプト・独自ライセンス

デモのキャプチャ

Split.js -GitHub
デモページ

水平・垂直に位置が変更可能な区切りを設定できるスクリプト。3分割や水平と垂直の組み合わせにも対応。
単体スクリプト・MITライセンス

デモのキャプチャ

diamonds.js -GitHub
デモページ

アイテムをダイアモンド状に配置するスクリプト。レスポンシブ対応で、サイズや溝も簡単に設定できます。
jQueryのプラグイン・MITライセンス

デモのキャプチャ

Tilted Page Scroll -GitHub
デモページ

縦長ページの各コンテンツを3Dに傾けて、アニメーションで表示します。
jQueryのプラグイン・GNUライセンス

デモのキャプチャ

Vegas
Vegas -GitHub
デモページ

画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できます。
jQuery/Zeptoのプラグイン・MITライセンス

デモのキャプチャ

CoverVid -GitHub
デモページ

.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できます。
jQueryのプラグイン・MITライセンス

デモのキャプチャ

particles.js -GitHub
デモページ

背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できます。
単体スクリプト・MITライセンス

デモのキャプチャ

pagePiling.js -GitHub
デモページ

縦長ページのセクションごとにフルスクリーンでコンテンツを表示させるスクロールページを作ります。
jQueryのプラグイン・MITライセンス

デモのキャプチャ

Scrollify -GitHub
デモページ

縦長ページでスクロールする時に、ちょうどいい位置にスナップさせます。
jQueryのプラグイン・MITライセンス

デモのキャプチャ

FocusPoint
デモページ

画像をデスクトップではそのまま表示し、スマホやタブレットなどでは指定した箇所を中心にクロップして表示します。
jQueryのプラグイン・MITライセンス

デモのキャプチャ

EqualHeight.js -GitHub
デモページ

レスポンシブ対応で、高さの異なるパネルを揃えたり、成り行きにすることができます。
jQueryのプラグイン・MITライセンス

デモのキャプチャ

matchHeight
matchHeight -GitHub
デモページ

異なる高さを単に揃えるだけでなく、グルーピングや列に応じて揃えることも可能です。
jQueryのプラグイン・MITライセンス

デモのキャプチャ

Wookmark -GitHub
デモページ

高さの異なる要素をレンガ状に隙間なく並べるだけのシンプルなスクリプト。今年リリースされた2.0からjQuery依存ではなくなり、単独で動作します。
単体スクリプト・MITライセンス

デモのキャプチャ

Freewall -GitHub
デモページ

レンガ状に並べる系の高機能なスクリプト。指定したアイテムのドラッグ、アイテムのフィルタリングなどにも対応しています。
jQueryのプラグイン・MITライセンス

top of page

©2016 coliss