いまどきの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
![だいたい10分で実装できる!CSS3とjQueryで絞り込みアニメーション作ってみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/def1231064f294933a626f6cc3f432feb48040d4/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2022%2F07%2F28%2F2448024%2Fl%2F5bca3f52eef2a9ad.jpg)