スタイリッシュなアニメーションで要素を絞り込み・ソートする「Shuffle.js」 | NAKAZI LAB.（ナカジラボ）
デモページ 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" cl
だいたい10分で実装できる！CSS3とjQueryで絞り込みアニメーション作ってみた
いまどきのWebサイトでよく見かける、タイルやカードを使ったレイアウト。ボタンをクリックするとアニメーションしながらタイルやカードの絞り込みができるコードの紹介です。専用のjQueryプラグインもありますが、CSS3とjQueryでも簡単に作れるようです。 先日、絞り込みと並び替え（フィルタリングとソート）表示によく使われるjQueryプラグイン、MixItUpの記事を書きました。今回は、jQueryとCSSアニメーションを使って、シンプルに絞り込みができるコンポーネントを構築する方法について説明します。 それではさっそく始めましょう！ HTMLの設定 最初にHTMLの設定です。次のコードを見てください。 <div class="cta filter"> <a class="all active" data-filter="all" href="#" role="button">Show
要素をアニメーションで絞り込みや並び替えさせるjQueryプラグイン Shuffle.js | N-LOG
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="ye
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
