[JS]ぷるぷるっとかわいいアニメーションでレイアウトを変更するレスポンシブ用のスクリプト -DyLay

ダイナミックなかわいいアニメーションでパネルのレイアウトを変更する、レスポンシブ用のレイアウトを生成するjQueryのプラグインを紹介します。

DyLay! V2
DyLay -GitHub

• DyLayのデモ
• DyLayの使い方

DyLayのデモ

デモはフィルタとソートでレイアウトを変更します。

デモページ

DyLayの使い方

Step 1: 外部ファイル

「jquery.js」と「easing.js」と当スクリプトを外部ファイルとして</bpdy>の上に記述します。

<script src="http://code.jquery.com/jquery.js"></script>	
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/dylay.js"></script>

Step 2: HTML

各パネルはリスト要素で配置し、フィルタやソート用のデータをclassやdata属性に仕込んでおきます。

<ul id="dylay">
	<li style="width: 10%; height: 20px;" class="voyelle"  data-foo="5">A</li>
	<li style="width: 10%; height: 40px;" class="consonne" data-foo="6">B</li>
	<li style="width: 10%; height: 40px;" class="consonne" data-foo="3">C</li>
	<li style="width: 10%; height: 20px;" class="consonne" data-foo="2">D</li>
	<li style="width: 10%; height: 60px;" class="voyelle"  data-foo="4">E</li>
	<li style="width: 10%; height: 60px;" class="consonne" data-foo="1">F</li>
	<li style="width: 10%; height: 20px;" class="consonne" data-foo="7">G</li>
</ul>

Step 3: CSS

リストをパネル風にレイアウトするには、下記のようになります。

#dylay { margin: 0; padding: 0; list-style: none; }
#dylay li { float: left; margin: 2px; border-radius: 5px; padding: 2px 5px; font-size: 10px; }

Step 4: JavaScript

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

jQuery(document).ready(function () {
	var $dylay = jQuery('#dylay');
});

オプション

オプションでは、アニメーションのスピードや種類などを設定できます。

// init
$dylay.dylay({
// アニメーションのスピード
	speed: 1500,
// アニメーションの種類
	easing: 'easeOutElastic',
// セレクタの定義
	selector: '>li'
});