【jQuery】超簡単プラグイン『MixItUp.js』フィルタリングギャラリーの使い方

こんにちは!
みなさんはサイト作成の際に項目をフィルタリングして要素を選択することってありませんか。
意外と難しそうに考えてしまいますが、おしゃれで動きのあるフィルタリングギャラリーのプラグインがあるのでご紹介します。

『MixItUp.js』

STEP1:「MixItUp.js」をダウンロードする

(1)公式サイトからプラグイン本体をダウンロードしてください。

(2)head内のなかに下記を入れてください。

STEP2:HTMLを追加する

コンテンツ側

必須デフォルトは「mix」クラスをつけること!

コントロール側

CSSの設定

STEP3:jQueryの設定

まとめ

STEP3で実装できるので、初心者にも簡単なプラグインになります。
公式サイトには他にもアニメーション機能などもありますので、参考にしてみてください!

おすすめ記事

【JavaScript】簡単に設置できる郵便番号検索『ajaxzip3』使い方をご紹介!フォームを使用してもらうためにはユーザー目線で作成することが必要になります。「こんな機能があったら入力が便利なのに…」と客観的に観察することでいかに使いやすいフォームにするか考えることが重要です。「郵便番号を入力したら住所が自動表示される」機能をご紹介します。

【JavaScript】割り算の「切り捨て」「切り上げ」「四捨五入」についてまとめJavaScriptで割り算の「切り捨て」「切り上げ」「四捨五入」についてご紹介します。JSを使って計算をするというのはWEBデザイナーなら誰しも行いますよね。
今は使わなくてもいずれ使う場面が出てくると思います。
知っていて損はないのでこの機会にぜひ覚えましょうー!

【JavaScript】全ての文字を置換する方法は「replace」と「正規表現」今回はJavaScriptで全ての文字を置換する方法についてご紹介いたします。置換の基本は「replace」しかし、ただreplaceをするだけでは全ての文字は置換されないんですね。そこで全部の文字を置換するには「正規表現」を使いましょう!!