レスポンシブデザインに相性がいい、カード型コンポーネントの実装アイデアのまとめ
Post on:2016年3月30日
sponsors
カード型のUIはPinterestから人気が出始め、ここ1,2年の間に数多くのWebサイトで採用されるようになりました。レスポンシブデザインに相性が非常によいのも人気である原因の一つでしょう。
次のプロジェクトで使いたくなるような実装アイデアを備えたカード型レイアウトやカード型コンポーネントを紹介します。
まずは、アニメーションの動きが気持ちいいカード型UIから。
各カードをタップすると、コンテンツがぱたぱたと開いて表示されます。飛行機っぽくて楽しいですね。
アイコンをタップすると、オーバーレイでコンテンツを表示します。
商品購入時に、アニメーションでラッピングしてくれます。Pure CSSで実装。
ドラッグ&スローで、カードをぽいっと放ることができます。
フッタに備えたアイコンで、ソーシャルコンテンツを表示。
左は通常時、右はホバー時で、カードのレイアウトが変化します。
表示サイズに合わせて、3タイプのレイアウトを備えたカード。
さまざまな表示サイズに対応したカードで、中央の斜めのラインはどのサイズでも維持されています。
Material Design - Responsive card
Material Designのカラーパレットを使ったカード、アイコンのタップでレイアウトが切り替わる時のアニメーションも気持ちいいです。
カードがスライドして、その下にリスト状のコンテンツが表示されます。
アコーディオンを備えたカードで、レスポンシブ対応。小さいサイズではタイル状に変化します。
プロダクト用に必要な要素をうまく配置したカード。
モーダルウインドウを開くように表示されるカード。
名刺のようにデザインされたカードコンテンツで、タップで情報が表示されます。
デフォルト時はサークル状のアイコン、ホバーするとアニメーションでカードに変形します。
カードの下部がコメントを配置するウィジェットになっており、スクロールしてコメントが表示されます。
Twitterのプロフィールをカード型に配置。
Movie Card Interactive UI With Pure CSS3 Animation Rating
レイティングをアニメーションで付けられるカード型コンテンツ。
こちらもアニメーション対応のレイティング。付箋もカードに合いますね。
スライダー機能を備えたカード。
Card Swipe Animation Material Design
スワイプ時にただ横に移動させるだけでなく、スケールも変化させます。
「Fly to」の文字通り、「Add to Cart」をタップするとカートに飛んでいきます。
sponsors
