レスポンシブと相性がいいカード型UIのレイアウトやデザインの実装アイデアのまとめ
Post on:2016年6月8日
sponsors
Pinterestから人気が出始めたカード型UIは、ここ1, 2年の間に日本でも多くのWebサイトで見かけるようになりました。BootstrapやMaterial Designにも採用されており、レスポンシブデザインとも非常に相性がよいUIコンポーネントです。
そんなカード型UIのレイアウトやデザイン、アニメーションを伴ったインタラクションの実装アイデアを紹介します。
各リンク先ではHTMLやCSS、使用していればJavaScriptも編集・ダウンロードできます。
インタラクションの一部をアニメーションにしてみました。他にも写真がズームしたり、タブ（機能は未）などが用意されており、省スペースに多くの情報を掲載することができます。
フェードやスライドの美しいアニメーションを備えたカードで、背景になっている箇所もズームします。
スクリーンサイズによって異なるレイアウトになるカード。
肉球のアイコンは、ずるいｗ
個人向けのソーシャル用のカードで、下と対になっています。
波状の区切り線は美しいアニメーションで表現されています。
カードのロード時は、何もない状態からボールが弾み、カードを作り出します。
ブログ記事の一覧用のカード。このくらいのホバーエフェクトがちょうどよいですね。
半透明のカードはドラッグで移動することができます。
気持ちいいアニメーションでカードを次々に表示させます。
斜めの区切り、斜めのタイポグラフィは、サイズが変更されても維持されています。
z-indexを使ったデザイン、アリですね。
sponsors
