JavaScript 2018.08.20

MixItUp3の基礎的な設置方法

ソートをアニメーションで楽しく動かすMixItUp3
https://www.kunkalabs.com/mixitup/

オプションが豊富で様々な面白い動きができるんですが、まず基礎的な設置方法がよくわからなかったので、基礎的な設置だけ載せておきます。

HTMLに記述

<div class="container">
    <div class="mix category-a" data-order="1">ここにカテゴリaの要素</div>
    <div class="mix category-b" data-order="2">ここにカテゴリbの要素</div>
    <div class="mix category-b category-c" data-order="3">ここにカテゴリcの要素</div>
    <div class="mix category-a category-d" data-order="4">ここにカテゴリdの要素</div>
</div>

ここにカテゴリaの要素

ここにカテゴリbの要素

ここにカテゴリcの要素

ここにカテゴリdの要素

「category-a」「category-b」とかがカテゴリ名になります。
そのまんま書いてますので、リストタグにしてもいいと思いますが。

ボタンを設置

<button type="button" data-filter="all">All</button>
<button type="button" data-filter=".category-a">Category A</button>
<button type="button" data-filter=".category-b">Category B</button>
<button type="button" data-filter=".category-c">Category C</button>

ボタン群を先ほどの記述した上に追加記述。

jsを読み込み

GitHubに圧縮ファイルがあるので、そこからDL
その中の「dist」フォルダにある「mixitup.min.js」を任意の場所に設置。

    <script src="mixitup.min.js"></script>
    <script>
        var mixer = mixitup('.container');
    </script>
</body>

読み込ませた下に追記します。＜/body＞の直前に。

これせ動くはずなので、装飾はご自由に。