びよーんとした動きでグリッド状に配置してくれるjQueryプラグイン「DyLay」

びよーんとした動きでグリッド状に配置してくれるjQueryプラグイン「DyLay」サンプル Pinterestの登場からグリッド状に要素を配置するデザインが流行りました。
その多くがウィンドウサイズを変えた時にのそーっと動くものでした。
jQueryプラグインのDyLay - a simple dynamic layout jQuery pluginを利用するとびよーんと小気味よいビートを刻みながら動いてくれます。

使用方法 DyLay - a simple dynamic layout jQuery pluginからファイルをダウンロード。
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="dylay.js"></script>
<script type="text/javascript">
$(function() {
$('#id名').dylay({
speed: 1500, //アニメーションスピード
easing: 'easeOutElastic', //easingプラグインの動き
selector: '>li' //配置したい子要素
});
});
</script>

あとは要素を記述していけば完成です。
<ul id="dylay">
<li>A</li>
<li>B</li>
<!-- 以下要素分 -->
</ul>

CSSは以下のように書いておきます。
#id名 { margin: 0; padding: 0; list-style: none; }
#id名 li { float: left; margin: 2px; border-radius: 5px; padding: 2px 5px; font-size: 10px; }

びよーんとした動きでグリッド状に配置してくれるjQueryプラグイン「DyLay」サンプル

sponsors

「びよーんとした動きでグリッド状に配置してくれるjQueryプラグイン「DyLay」」をシェアする

記事作成:
記事URL:

TOP > > > びよーんとした動きでグリッド状に配置してくれるjQueryプラグイン「DyLay」