カード
一覧に並ぶカードや画像に、手ざわりを加える演出です。カーソルに合わせて傾くカード、スクロールで順に現れるカード、つまみを引いて前後を見比べる画像などを、デモとコードで紹介しています。
カードのインタラクション（33件）
-
-
口コミのカードが自動で順に切り替わり、ドットが残り時間を示して進む
-
横に並んだ縦長のカードがホバーで広がり、文字が遅れて出る
-
単色のパネルが走り抜けたあとに画像が現れる
-
カードが途切れず横に流れ続けるカルーセル
-
画像が重なりながら順に切り替わるギャラリー
-
ホバーで商品カードの画像が別の角度に替わり、カートに入れるボタンがせり上がる
-
ホバーでメンバーカードの写真が白黒から色づき、SNS のアイコンが順に出る
-
ホバーで記事カードの見出しに下線が引かれ、矢印が右へ抜けて戻る
-
ホバーでカードが 3D に裏返って裏面が出る
-
ギャラリーの絞り込みでグリッドが並び替わる（FLIP）
-
スクロールで固定したセクションが横に流れる
-
カードがカーソルに合わせて 3D で傾き、光沢が走る
-
スクロールでカードが下からふわっと順に現れる
-
画像の境目のハンドルを引いて前後を見比べる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。