要素をアニメーションで絞り込みや並び替えさせるjQueryプラグイン Shuffle.js

Nov 14, 2013

Category :

Tags :

jQuery

ついこの間、自分のポートフォリオサイトを制作した時に使用したjQueryプラグイン、Shuffle.jsの設置メモ。

Demoを見る

HTML

		<ul id="btn">
		<li data-group="all" class="active alpha">ALL</li>
		<li data-group="red" class="alpha">RED</li>
		<li data-group="blue" class="alpha">BLUE</li>
		<li data-group="green" class="alpha">GREEN</li>
		<li data-group="yellow" class="alpha">YELLOW</li>
	</ul>
	<ul id="animationList">
		<li data-groups='["red"]'><span class="red">RED</span></li>
		<li data-groups='["yellow"]'><span class="yellow">YELLOW</span></li>
		<li data-groups='["blue"]'><span class="blue">BLUE</span></li>
		<li data-groups='["green"]'><span class="green">GREEN</span></li>
		<li data-groups='["green"]'><span class="green">GREEN</span></li>
		<li data-groups='["yellow"]'><span class="yellow">YELLOW</span></li>
		<li data-groups='["blue"]'><span class="blue">BLUE</span></li>
		<li data-groups='["red"]'><span class="red">RED</span></li>
		<li data-groups='["red"]'><span class="red">RED</span></li>
		<li data-groups='["blue"]'><span class="blue">BLUE</span></li>
		<li data-groups='["yellow"]'><span class="yellow">YELLOW</span></li>
		<li data-groups='["green"]'><span class="green">GREEN</span></li>
	</ul>

絞り込む要素を選択するボタンにカスタムデータ属性を定義。
絞り込み表示する要素にも、カスタムデータ属性を設定し、絞り込む要素を選択するボタンと関連させる。

<li>内に<span>を置いている理由は、margin-topとmargin-rightの値が0に書き換えられてしまうので、 <li>にpaddingを設定し、隣接する要素との間隔をとっています。
通常は<span>ではなく、<img>を使うことになると思いますが、サンプルでは画像を用意するのが面倒だったので<span>を使用しています。

CSS

		#btn {
		overflow: hidden;
		margin-bottom: 40px;
	}
	
	#btn li {
		float: left;
		margin: 10px;
		cursor: pointer;
	}
	
	#animationList {
		overflow: hidden;
	}
	
	#animationList li {
		width: 220px;
		height: 220px;
		padding: 10px;
		float: left;
		color: #fff;
	}
	
	#animationList li span {
		display: block;
		width: 180px;
		height: 180px;
		padding: 20px;
	}

CSSはこんな感じ。
デザインによって変わってくると思いますが、 <li>に高さを指定しないと途中で画像が切れてしまいます。

jQuery

		<script>
		$(function() {
			$('#btn li').on('click', function() {
				var $this = $(this),
					$grid = $('#animationList');
					
				$('#btn .active').removeClass('active');
				$this.addClass('active');
				$grid.shuffle($this.data('group'));
			});
			
			$('#animationList').shuffle({
				group: 'all',
				speed: 700,
				easing: 'ease-in-out'
			});
		});
	</script>

3行目から9行目で、主に絞り込む要素を選択するボタンに.activeを追加したり削除したりして、どのカテゴリーが表示されているのか分かるようにしています。
12行目以降でShuffleの設定をしています。オプションは本家サイトで確認してくだい。

対応ブラウザは