カード
一覧に並ぶカードや画像に、手ざわりを加える演出です。カーソルに合わせて傾くカード、スクロールで順に現れるカード、つまみを引いて前後を見比べる画像などを、デモとコードで紹介しています。
カードのインタラクション（31件）
-
-
スクロールで円筒状に並んだカードが回る
-
記事カードの画像がモザイクから段階的に鮮明になって現れる
-
スクロールで画像が縮んだ状態から広がって現れる
-
スクロールでカードが重なりながら積み上がる
-
スクロールでヒーローの画像が下のカードのグリッドへ移って並ぶ（FLIP）
-
スクロールの速さに合わせてカードの画像が傾く
-
スクロールで画像が左からクリップで開いて現れる
-
作品カードのホバーした画像が液体のようにゆがむ
-
スクロールでカードの画像がブラインドのように横のストライプで順に開く
-
ホバーでカードが浮き上がり、影が深くなる
-
クリックしたカードがその場から広がり、詳細画面になる
-
カーソルの位置でカードに光が当たり、枠も照らされる
-
ホバーでカードの画像が寄り、キャプションが下から上がる
-
料金表のカードの価格が、月額と年額の切り替えで数字を回して入れ替わる
-
カードの上で重なったアバターがホバーで広がる
-
重なったカードを横にはじいて次へ送る
-
口コミのカードが自動で順に切り替わり、ドットが残り時間を示して進む
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。