Webサイトのユーザーエクスペリエンスを向上させるために、リストアイテム(liタグ)の並び替えをスムーズなアニメーション付きで実装したい場合、jQueryのプラグイン「jquery.quicksand.js」を活用するのが有効です。
この記事では、jquery.quicksand.jsを使って、liタグをアニメーションしながらソートする方法を詳しく解説します。
jquery.quicksand.jsとは?
jquery.quicksand.jsは、jQueryのプラグインの一つで、HTML内の要素をスムーズに並び替えることができます。特に、フィルタリングや並び替えの際に要素が一瞬で消えたり切り替わるのではなく、柔らかくアニメーションするため、ユーザーにとって直感的で分かりやすいインターフェースを提供できます。
利用環境の準備
まずは、jquery.min.js(v1.6.2)、jquery.quicksand.jsファイルを読み込みます。
使用するバージョンによって挙動が変わることがあるため、特定のバージョンで動作を確認してください。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.quicksand.js" type="text/javascript"></script>
CSSの設定
次に、アニメーションソートを適用するために、基本的なCSSを設定します。
以下のコードは、アニメーションソートさせるため「li」「.Sbox」「.Sbox li」タグを用意しました。
レイアウトを整えながら、アニメーションの見栄えを良くするためのものです。
<style type="text/css">
<!--
body {
margin: 0px;
font-size:14px;
}
h1{
font-size:16px;
font-weight:normal;
line-height:1.2em;
text-align:center;
padding-bottom:15px;
}
li{list-style-type: none;}
a{
font-size:14px;
text-decoration:none;
line-height:1.4em;
}
a:hover{
font-size:14px;
text-decoration:underline;
line-height:1.4em;
}
#idWrap{
width:300px;
margin:0 auto;
text-align:center;
}
.Sbox {
overflow: hidden;
}
.Sbox li{
display: block;
float: left;
width:50px;
height:50px;
margin: 0;
padding:4px;
}
-->
</style>
HTMLとJavaScriptの実装
以下のコードでは、ボタンをクリックすると、指定したソート方法(降順・昇順・一部昇順)でliタグの並びを変更するように設定しています。
ソート対象のliコンテンツの下にJavaScriptを記述してます。$(ソートエリア).quicksand( liタグ, {演出オプション} )で設定します。
また、上記方法はソート内容を以下の別ファイル(index1.html、index2.html、index3.html)に別けて設定します。
<h1>liタグコンテンツを複数(別ページ)に別けて、アニメーションソート表示</h1>
<div id="idWrap">
<a class="button" href="index1.html">ソート1(降順)</a><br>
<a class="button" href="index2.html">ソート2(昇順)</a><br>
<a class="button" href="index3.html">ソート3(半分の昇順)</a>
<br> <br>
<ul class="Sbox">
<li data-id="01"><img src="img1.jpg" width="50" height="50" alt=""></li>
<li data-id="02"><img src="img2.jpg" width="50" height="50" alt=""></li>
<li data-id="03"><img src="img3.jpg" width="50" height="50" alt=""></li>
<li data-id="04"><img src="img4.jpg" width="50" height="50" alt=""></li>
<li data-id="05"><img src="img5.jpg" width="50" height="50" alt=""></li>
<li data-id="06"><img src="img6.jpg" width="50" height="50" alt=""></li>
<li data-id="07"><img src="img7.jpg" width="50" height="50" alt=""></li>
<li data-id="08"><img src="img8.jpg" width="50" height="50" alt=""></li>
<li data-id="09"><img src="img9.jpg" width="50" height="50" alt=""></li>
<li data-id="10"><img src="img10.jpg" width="50" height="50" alt=""></li>
</ul>
<script type="text/javascript">
$(function() {
$('a.button').click(function(e) {
$.get( $(this).attr('href'), function(data) {
$('.Sbox').quicksand( $(data).find('li'), {adjustHeight: 'dynamic'} );
});
e.preventDefault();
});
});
</script>
降順ソートする別ファイル(index1.html)の記述
<ul class="Sbox">
<li data-id="10"><img src="img10.jpg" width="50" height="50" alt=""></li>
<li data-id="09"><img src="img9.jpg" width="50" height="50" alt=""></li>
<li data-id="08"><img src="img8.jpg" width="50" height="50" alt=""></li>
<li data-id="07"><img src="img7.jpg" width="50" height="50" alt=""></li>
<li data-id="06"><img src="img6.jpg" width="50" height="50" alt=""></li>
<li data-id="05"><img src="img5.jpg" width="50" height="50" alt=""></li>
<li data-id="04"><img src="img4.jpg" width="50" height="50" alt=""></li>
<li data-id="03"><img src="img3.jpg" width="50" height="50" alt=""></li>
<li data-id="02"><img src="img2.jpg" width="50" height="50" alt=""></li>
<li data-id="01"><img src="img1.jpg" width="50" height="50" alt=""></li>
</ul>
昇順ソートする別ファイル(index2.html)の記述
<ul class="Sbox">
<li data-id="01"><img src="img1.jpg" width="50" height="50" alt=""></li>
<li data-id="02"><img src="img2.jpg" width="50" height="50" alt=""></li>
<li data-id="03"><img src="img3.jpg" width="50" height="50" alt=""></li>
<li data-id="04"><img src="img4.jpg" width="50" height="50" alt=""></li>
<li data-id="05"><img src="img5.jpg" width="50" height="50" alt=""></li>
<li data-id="06"><img src="img6.jpg" width="50" height="50" alt=""></li>
<li data-id="07"><img src="img7.jpg" width="50" height="50" alt=""></li>
<li data-id="08"><img src="img8.jpg" width="50" height="50" alt=""></li>
<li data-id="09"><img src="img9.jpg" width="50" height="50" alt=""></li>
<li data-id="10"><img src="img10.jpg" width="50" height="50" alt=""></li>
</ul>
タグ要素を半分にして昇順ソートする別ファイル(index3.html)の記述
<ul class="Sbox">
<li data-id="01"><img src="img1.jpg" width="50" height="50" alt=""></li>
<li data-id="03"><img src="img3.jpg" width="50" height="50" alt=""></li>
<li data-id="05"><img src="img5.jpg" width="50" height="50" alt=""></li>
<li data-id="07"><img src="img7.jpg" width="50" height="50" alt=""></li>
<li data-id="09"><img src="img9.jpg" width="50" height="50" alt=""></li>
</ul>
liタグコンテンツを複数ページに別けて、アニメーションソート表示するデモページ
liタグコンテンツを複数ページに別けて、アニメーションソート表示するデモ
ソース元:jQuery Quicksand plugin
上記「ソース元」では別ファイルにわけず1ページ内で対象のliコンテンツを非表示して、ソートさせてます。
ソート時にアニメーションは「ソース元」のページ下部「Demos&Docs」ページの下にその他設定例が有ります。
まとめ
jquery.quicksand.jsを使用すると、liタグの並び替えをスムーズなアニメーションで実装できます。
本記事のサンプルコードを参考に、ぜひWebサイトのUI/UX向上に役立ててください。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。