NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

スタイリッシュなアニメーションで要素を絞り込み・ソートする「Shuffle.js」

2013年4月4日jQueryプラグイン活用

スタイリッシュなアニメーションで要素を絞り込み・ソートする「jQuery Shuffle Plugin」

jQueryプラグイン「Shuffle.js」を使うことで、要素や画像をスタイリッシュなアニメーションで絞り込んだり・ソートすることができます。

デモページ

JavaScript

(function($){
	$(function() {
		$('#sort li').on('click', function() {
			var $this = $(this),
			$grid = $('#itemList');
			$('#sort .active').removeClass('active');
			$this.addClass('active');
			$grid.shuffle($this.data('group'));
		});
		$('#itemList').shuffle({
			group: 'all',
			speed: 400,
			easing: 'ease-in-out'
		});
	});
})(jQuery);

HTML

<div id="sortArea">
	<div id="sort">
		<ul>
			<li data-group="all" class="active">All</li>
			<li data-group="html">HTML</li>
			<li data-group="css">CSS</li>
			<li data-group="javascript">JavaScript</li>
		</ul>
	</div>
	<div id="itemList">
		<div class="item html" data-groups='["html"]'>HTML</div>
		<div class="item html" data-groups='["html"]'>HTML</div>
		<div class="item javascript" data-groups='["javascript"]'>JavaScript</div>
		<div class="item css" data-groups='["css"]'>CSS</div>
		<div class="item css" data-groups='["html"]'>HTML</div>
		<div class="item css" data-groups='["css"]'>CSS</div>
		<div class="item css" data-groups='["css"]'>CSS</div>
		<div class="item javascript" data-groups='["javascript"]'>JavaScript</div>
		<div class="item css" data-groups='["css"]'>CSS</div>
		<div class="item javascript" data-groups='["javascript"]'>JavaScript</div>
		<div class="item html" data-groups='["html"]'>HTML</div>
		<div class="item javascript" data-groups='["javascript"]'>JavaScript</div>
	</div>
</div>

配布元

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. スタイリッシュなアニメーションで要素を絞り込み・ソートする「Shuffle.js」

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com