
スタイリッシュなアニメーションで要素を絞り込み・ソートする「Shuffle.js」
2013年4月4日jQueryプラグイン活用
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>