[JS]変更時のアニメーションが気持ちいい、レスポンシブ対応のかっこいいグリッドを生成するスクリプト -Grid—A—Licious

Masonryはかっこいいけどパネル移動のアニメーションがちょっとな、という人にぴったりな、レスポンシブ対応でレイアウト変更時のアニメーションもスムーズでかっこいいグリッドを生成するjQueryのプラグインを紹介します。

サイトのキャプチャ

Grid—A—Licious
Grid—A—Licious -GitHub

Grid—A—Liciousのデモ

まずは、Grid—A—Liciousのベーシックな動作が確認できるデモからご紹介。
アレンジは、下記のGrid—A—Liciousの実装例で。

ページいっぱいに高さの異なるパネルが同じ間隔で配置されています。

デモのキャプチャ

デモページ:デスクトップサイズ

ページ上部のアイコンをクリックすると、表示サイズを変更できます。
もちろん、ブラウザのサイズを変更しても可。

デモのキャプチャ

デモページ:タブレットサイズ

スムーズなアニメーションでパネルのレイアウトがスピーディに最適化されます。

デモのキャプチャ

デモページ:スマフォサイズ

Grid—A—Liciousの使い方

Grid—A—Liciousは2008年にリリースされた当時は単にグリッド状に配置するだけのプラグインでしたが、今回レスポンシブデザイン対応になり生まれ変わりました。
実装は非常に簡単で、オプションも実用的なものが揃っています。

Step 1: 外部ファイル

jquery.js」と当スクリプトを外部ファイルとして記述します。

<script src="js/jquery.js"></script>
<script src="js/jquery.grid-a-licious.js"></script>

Step 2: HTML

パネルはdiv要素で実装し、div要素で内包します。

<div id="device">
	<div class="item">パネル</div>
	<div class="item">パネル</div>
	<div class="item">パネル</div>
	<div class="item">パネル</div>
	...
	...
</div>

Step 3: JavaScript

jQueryのセレクタでラッパを指定し、スクリプトを実行します。

$("#device").gridalicious({});

スクリプトのオプション

オプションではレイアウトの微調整やアニメーションの設定ができます。

width (Defult: 225px)
レイアウトの全体の幅
デスクトップでもスマフォでもいっぱいに表示する場合は「width: '100%'」
gutter (Default: 20px)
パネル間の溝のサイズ
selector (Default: .item)
各パネルのclass名
animate (Default: false)
アニメーションの有無
queue (Default: true)
アニメーションの待ち行列オブジェクトの有無
speed (Default: 200)
アニメーションのスピード
duration (Default: 300)
アニメーションの遅延時間
effect (Default: fadeInOnAppear)
アニメーションのエフェクト
complete (Default :function())
アニメーションの完了時のコールバック

Grid—A—Liciousの実装例

デモのキャプチャ

Example 1

幅をカスタマイズし、デフォルトの溝(20px)を使用した例です。

$("#example1").gridalicious({
	width: 100
});
デモのキャプチャ

Example 2

幅だけなく、溝のサイズもカスタマイズした例です。

$("#example2").gridalicious({
	gutter: 1,
	width: 100
});
デモのキャプチャ

Example 3

最後はパネルを増やす際のアニメーションを設定します。
上部のボタンをクリックすると、パネルの上部(下部)にフェードのアニメーションでパネルが追加されます。

デモのキャプチャ

Example 3:フェードでパネルが追加

スクリプトはオプションの「animate」を「true」にし、設定します。

$("#example3").gridalicious({
	gutter: 1,
	width: 75,
	animate: true,
	animationOptions: {
		speed: 200,
		duration: 300,
		complete: onComplete
	},
});

ボタンは下記のようになります。

$('#prepend').click(function () {
	$("#example3").gridalicious('prepend', makeboxes());
});
$('#append').click(function () {
	$("#example3").gridalicious('append', makeboxes());
});

top of page

©2017 coliss