お久しぶりです。ナガタです。
7月初旬からの更新となり2ヶ月あまり途絶えていてすみませんでした!
以下の様な状況でございました。
- さくらハウスオープン
- 鹿児島にスタートアップやテック系文化を応援するイベントスペースをオープンしました。
- ASCII.jpさんに記事にして頂きました。→ASCII.jp:酒がうまい勉強会、最高! 鹿児島さくらハウスがうらやましい
- 脱腸してた
- 私ナガタが脱腸(ヘルニア)を患ってしまい、その他業務も含めバタバタしておりました。
- ナガタ無事手術を終え経過も良好です。
更新ない日も毎日沢山の方に閲覧いただいていたようで嬉しいです。
というわけでこれからまた再開していければと思います。
簡単なのにいい感じのアニメーションで要素を入れ替えられる「MixItUp」
仕事復帰後早速の業務で触れた「MixItUp」をご紹介します。
まぁ見て触ってもらうのが早いと思うのでDemoを。
See the Pen JYGVjw by Tsukasa Nagata (@nt-uni) on CodePen.0
こんな感じです。
これがデフォルトの動きとなってます。
基本機能
- フィルタリング
- 特定の要素のみ、また組み合わせでも可能です。該当するもののみを表示します。
- ソート
- ランダムの他、昇順・降順可能で、細かく設定して複数要素(年齢の降順、名前の昇順)とかも可能です。
使い方
使い方はいたって簡単で、JacaScriptの外部ライブラリを使ったことがある方なら問題なく導入することができると思います。
こちらにチュートリアルがあるのですが、ざっくりとご説明します。
1. フィルタリング・ソート対象となる要素を設定する
<div id="Container">
<div class="mix"></div>
<div class="mix"></div>
<div class="mix"></div>
<div class="mix"></div>
</div>
上記のような感じで、必要なのは要素を囲む親要素のIDと要素自体にmix
というクラスを指定します。
フィルタリングするカテゴリーもこちらのclassに指定します。
<div class="mix category-1"></div>
という感じですね。カテゴリーの数だけ作ります。
ここの名前はフィルタリングするための識別なのでご自身で決めてOKです。
ちなみにdiv
に対して付与していますが、li
やp
でも問題ありません。
2. フィルタリングコントロールをつくる
ボタンを押したらフィルタリングしたりソートしたりするわけですが、それを操作するためのボタンを定義します。
<div class="filter" data-filter="all">Show All</div>
<div class="filter" data-filter=".category-1">Category 1</div>
<div class="filter" data-filter=".category-2">Category 2</div>
こちらはクラスにfilter
をいれ、data-filter
に先ほど指定したカテゴリーをいれます。
ちなみにソートをするためにはdata-sort="category:asc"
と設定します。(asc: 昇順/desc: 降順)
3. フィルタリングする要素を隠す
MixItUpが表示するため、初期表示は隠しておく必要があります。
.mix{
display: none;
}
4. MixItUpを有効化する
※ jQueryを読み込ませてください
$(function(){
$('#Container').mixItUp();
}
ここでは冒頭に出た親要素を指定します。直下にフィルタリングさせる要素がある必要があります。
以上です!
こんな簡単に先ほどのDemoのようなアニメーションがかかったものを実装することができます。
まとめ
いかがでしたか?
ほんとに簡単にできて見栄えもいいので、使う機会があれば是非お試しください。
ご紹介しておりませんが、アニメーションの種類やレイアウトなどのオプションもありますのでカスタマイズもできそうです!
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事