Webデザインにおいて、視覚的な動きがユーザー体験に与える影響は非常に大きいです。特に、グリッドレイアウトを用いたデザインは、整然とした印象を与えながらも、動的なアニメーションでさらに魅力的にすることができます。
この記事では、dylay.jsというjQueryプラグインを用いて、弾むような動きでグリッドエリアを表示する方法について詳しく説明します。理解しやすいように、ステップバイステップで解説していきますので、ぜひ最後までお読みください。
dylay.jsとは
dylay.jsは、グリッドレイアウトを動的に配置し、滑らかなアニメーションで要素を表示するためのjQueryプラグインです。このプラグインを使うことで、ページのデザインに動きを持たせ、ユーザーにインタラクティブな体験を提供することが可能になります。特に、要素が弾むようなアニメーションを実現できるため、他のグリッドレイアウトにはない独特の魅力を持っています。
dylay.jsを使って弾むような動きでグリッドを表示する方法
ここからは、dylay.jsを使って実際に弾むような動きでグリッドエリアを表示する方法を詳しく見ていきます。最初に、必要なファイルを読み込み、基本的な設定を行います。その後、ソート機能を追加して、グリッド要素を自由に並び替えられるようにします。
JavaScriptの設定
まずは、jquery.min.js、jquery.easing.1.3.js、dylay.jsファイルを読み込みます。
次に、dylay.jsを使用してグリッドレイアウトを設定します。以下のコードを用いて、グリッド要素が弾むように表示されるようにします。
$(グリッドエリア).dylay({スピードやeasingの設定})を記述します。$(グリッドエリア).dylay(‘sort’,ソートルール})でソートルールでソートします。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="dylay.js"></script>
<script type="text/javascript">
$(function() {
$('#dylay').dylay({
speed:1500,
easing:'easeOutElastic',
selector:'>li' //配置したい子要素
});
//ソート
$('#sorts a').on('click', function () {
$('#dylay').dylay('sort', $(this).data('sort-by'), $(this).data('sort-way'));
return false;
});
});
</script>
このコードでは、グリッド要素が弾むように表示されるようspeedとeasingを設定しています。また、ソート機能を追加することで、リンクをクリックするだけでグリッド要素を並び替えることが可能です。
弾むような動きでグリッドを表示するCSSの記述
次に、dylay.jsで使用するグリッド要素のスタイルをCSSで定義します。グリッドエリア（#dylay li）のCSS記述です。
以下のコードをHTMLファイルの style タグ内に追加してください。
<style type="text/css" media="all">
<!--
body{
margin:0;
padding:0;
}
h1{
text-align:center;
font-size:18px;
font-weight:bold;
padding:15px 0 10px 0;
line-height:1.4em;
}
.clWrap{
width:80%;
margin:0 auto;
}
#sorts{
margin:0 auto;
padding:0 0 20px 0;
list-style:none;
width:200px;
}
#sorts li{
padding-bottom:4px;
}
#sorts li a{
color:#0066FF;
font-size:16px;
text-decoration:none;
}
#sorts li a:hover{
color:#0099FF;
}
#dylay{
margin:0;
padding:0;
list-style:none;
}
#dylay li{
float:left;
padding:3% 0;
margin:1%;
border-radius:5px;
background:#0066FF;
list-style:none;
font-size:14px;
text-align:center;
font-weight:bold;
color:#FFFFFF;
width:10%;
}
-->
</style>
このCSSコードは、グリッド要素の外観を定義しています。floatプロパティを使って要素を横並びにし、border-radiusを使って角を丸めることで、見た目に柔らかさを加えています。
HTMLの記述例
次に、実際にHTMLファイルでどのようにdylay.jsを使用するかを説明します。以下は、グリッドレイアウトを設定するためのHTMLの例です。
グリッドエリア（id=”dylay”）にグループ（class=”voyelle”かclass=”consonne”）とソート順（data-foo=数字）を設定します。
<div class="clWrap">
<h1>グリッドを弾むような動きで表示<br />
（以下のリンクでソートもできます）</h1>
<ul id="sorts">
<li><a href="#">テキスト昇順</a></li>
<li><a href="#" data-sort-way="desc">テキストの降順</a></li>
<li><a href="#" data-sort-by="foo">data-foo値（昇順）</a></li>
<li><a href="#" data-sort-by="foo" data-sort-way="desc">data-foo値（降順）</a></li>
</ul>
<ul id="dylay">
<li style="height:20px;" class="voyelle" data-foo="5">E</li>
<li style="height:40px;" class="consonne" data-foo="6">F</li>
<li style="height:40px;" class="consonne" data-foo="3">C</li>
<li style="height:20px;" class="consonne" data-foo="2">B</li>
<li style="height:60px;" class="voyelle" data-foo="4">D</li>
<li style="height:60px;" class="consonne" data-foo="1">A</li>
<li style="height:20px;" class="consonne" data-foo="7">G</li>
<li style="height:20px;" class="voyelle" data-foo="8">H</li>
<li style="height:40px;" class="consonne" data-foo="9">I</li>
<li style="height:40px;" class="consonne" data-foo="10">J</li>
<li style="height:20px;" class="consonne" data-foo="11">K</li>
<li style="height:60px;" class="voyelle" data-foo="12">L</li>
<li style="height:60px;" class="consonne" data-foo="13">M</li>
<li style="height:20px;" class="consonne" data-foo="14">N</li>
<li style="height:20px;" class="consonne" data-foo="15">O</li>
<li style="height:60px;" class="consonne" data-foo="16">P</li>
<li style="height:20px;" class="consonne" data-foo="17">Q</li>
<li style="height:40px;" class="consonne" data-foo="18">R</li>
<li style="height:20px;" class="consonne" data-foo="19">S</li>
<li style="height:40px;" class="consonne" data-foo="20">T</li>
<li style="height:20px;" class="consonne" data-foo="21">U</li>
<li style="height:40px;" class="consonne" data-foo="22">V</li>
<li style="height:60px;" class="consonne" data-foo="23">W</li>
<li style="height:40px;" class="consonne" data-foo="24">X</li>
<li style="height:60px;" class="consonne" data-foo="25">Y</li>
<li style="height:40px;" class="consonne" data-foo="26">Z</li>
</ul>
</div><!--/clWrap-->
このHTMLコードでは、id=”dylay”を持つ ul タグ内に、グリッド要素として li タグが配置されています。classやdata-foo属性を用いて、各要素にソートの基準を持たせています。
dylay.js：グリッドを弾むような動きで表示するデモページ
実際の動きを確認したい場合は、以下のリンクからデモページを参照してください。デモページでは、実際にグリッド要素が弾むように表示され、ソート機能がどのように動作するかも確認できます。
ソース元：DyLay – a simple dynamic layout jQuery plugin
まとめ
この記事では、dylay.jsを使って、弾むような動きでグリッドエリアを表示する方法について詳しく解説しました。このプラグインを活用することで、視覚的に魅力的なWebページを簡単に作成することができます。扱いやすく、カスタマイズも容易なため、ぜひ一度試してみてください。今後のWebデザインにおいて、動的なグリッドレイアウトはさらに重要な要素となることでしょう。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
