2017年12月5日(火)
[JS]カードやリストをアニメーションで移動できるレスポンシブ対応のグリッドを実装するスクリプト -Muuri
レンガ状のカードやリスト状のパネルをドラッグ&ドロップで移動したり、フィルタリングやソートも可能なレスポンシブ対応のグリッドを簡単に実装できるスクリプトを紹介します。通常だと複数のライブラリを組み合わせないと実装できませんが、これ一つで軽量に実装できます。
Muuriとは「壁(Wall)」を意味するフィンランド語だそうです。
Muuri
Muuri -GitHubMuuriの特徴
...
- レスポンシブ対応
- レイアウトのカスタマイズは自由自在
- パネルのドラッグ&ドロップに対応
- ネストされたグリッドに対応
- 高速で快適なアニメーション
- フィルタリングやソート機能を装備
- IE9+もサポート
- MITライセンス
author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV
今なら先着順で全員に!あの分厚い「Web制作会社年鑑2017」がまるごと一冊、無料でダウンロードできます
NEXT ›
広告費が多い企業は、ページ速度も速いのか? 表示速度1位はニコン。広告費1位トヨタ自動車は30位圏外。
関連記事
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『[JS]カードやリストをアニメーションで移動できるレスポンシブ対応のグリッドを実装するスクリプト -Muuri』についてまとめています。
この記事は特にレスポンシブ・javascript・アニメーション・SEOについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。