:: jQueryライブラリ(MixItUp)を使ってフィルタラブルを実装する

/ WEB制作・開発

以前、jQueryを使ってフィルタラブルを実装する方法を紹介しましたが、jQueryライブラリでMixItUpがあるので紹介します。動きは以前紹介した icon-link :: jQueryを使ってフィルタラブルを実装するとほとんど同じですが、jQueryライブラリはオプションが豊富で動作もスムーズです。

実装もほぼ同じくらいのコード量です。(MixItUpはmixitup.jsの読み込みとたったの4行のJavascriptで実装出来ます。)

さらにさまざまなオプションを加えることでエフェクト効果を操作することが出来るので、環境や好みに合わせて使ってみてください。

※デザインはすべて icon-link :: jQueryを使ってフィルタラブルを実装すると同じものを使っています。

   

 

 

サンプル

まずはCodepenのソースコードをご確認ください。AllやAustralia、Japanなどのボタンをクリックすると属性に紐付いた画像だけが表示されるようになります。

See the Pen Filterable With MixItUp by SHO EGAWA (@sho-egawa) on CodePen.

 

 

フィルタラブルの実装解説

まずはjQuery本体とmixitup.jsを読み込みます。

mixitupはここからダウンロード出来ます。
https://www.kunkalabs.com/mixitup

 

htmlのボタン箇所

triggerクラスと、data-filter=”***”がポイントです。triggerクラスはjsでクリックアクションを操作する時に使います。

data-filter=”***”はタグや属性を指定します。名称は何でも構いません。

今回はall、australia、japan、usa、spain、indiaとしています。

 

htmlの写真箇所

ポイントはfilterとその後ろにあるaustralia、japan、usa、spain、indiaの箇所とmixというクラスを追加していることです。

 

Javascriptの解説

1〜4行目はmixitupを動かすスクリプトです。

5〜8行目はボタンを押下したときにactiveクラスを追加するスクリプトです。これによりボタンを押した箇所の色を変えています。

公式サイトに詳細なドキュメントがあるので参考にしてみてください。動くスピードやアニメーションを変更することが出来ます。
https://www.kunkalabs.com/mixitup

SNS SHARE

RELATED POSTS

LEAVE A REPLY