カート投入アニメ
「カートに入れる」ボタンで商品サムネがカートアイコンへ放物線を描いて飛び込み、バッジ数が +1 される。タップでも動作。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 商品一覧・詳細でカートに入れた実感を返したい画面
- カートアイコンが画面内に常設されている構成
- カート導線を目立たせたいモバイルEC
- 避ける場面
- カートアイコンが画面外・別画面にある構成
- 1画面で連続して大量投入する業務発注画面
- 投入後すぐ画面遷移する購入フロー
- 構成要素
- 商品サムネ
- カートに入れるボタン
- 飛ぶ複製サムネ
- カートアイコン
- 件数バッジ
- 持っている状態
- 通常
- 押下中
- 無効
- キーボード
Tab でボタンへ、Enter／Space で投入。飛行中はボタンが disabled になり連打を防ぐ
- 支援技術
飛ぶ複製は aria-hidden で読み上げ対象外。投入完了と件数は視覚外の aria-live=polite で読み上げる。reduced-motion では放物線を省きバッジ更新だけ行う
- 動き
複製サムネが放物線で 580ms ease-in（縮小・減光しながら）カートへ。着弾後にバッジが 1.5 倍に 200ms バウンス。投入先の位置を伝えるための動き
デザインの要点
- 複製は「ボタン」でなく「商品サムネ」の位置から飛ばす。何がカートに入ったかを動きで言う
- 580ms の ease-in で縮小・減光しながら着弾させる。等速だと投げた物に見えず、着弾の実感が薄い
- 飛行中はボタンを disabled にして連打を止める。バッジは着弾後に弾ませ、投入先の位置を目に残す
- reduced-motion では放物線を省いてバッジだけ更新する。結果（件数）は同じで、動きだけ落とす
コード（コピーして使えます）
<div class="atc-scene">
<span class="atc-sr" id="atcStatus" aria-live="polite"></span>
<div class="atc-card">
<div class="atc-thumb" id="atcThumb">
<svg viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="60" height="60" rx="10" fill="#dce5f7"/>
<rect x="14" y="18" width="32" height="24" rx="4" fill="#2b50c7" opacity=".6"/>
<circle cx="30" cy="26" r="7" fill="#fff" opacity=".8"/>
<rect x="20" y="36" width="20" height="3" rx="1.5" fill="#fff" opacity=".5"/>
</svg>
</div>
<div class="atc-info">
<p class="atc-pname">ワイヤレスイヤホン</p>
<p class="atc-price">¥8,980</p>
</div>
<button class="atc-btn" id="atcBtn">カートに入れる</button>
</div>
<div class="atc-cart-wrap">
<svg class="atc-cart-icon" viewBox="0 0 28 28" fill="none" aria-label="カート" id="atcCart">
<path d="M3 5h2.5l3 11h11l2-7H8.5" stroke="#2b50c7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="11" cy="20" r="2" fill="#2b50c7"/>
<circle cx="18" cy="20" r="2" fill="#2b50c7"/>
</svg>
<span class="atc-badge" id="atcBadge" style="display:none">0</span>
</div>
<div class="atc-fly" id="atcFly" aria-hidden="true">
<svg viewBox="0 0 60 60" fill="none">
<rect width="60" height="60" rx="10" fill="#dce5f7"/>
<rect x="14" y="18" width="32" height="24" rx="4" fill="#2b50c7" opacity=".6"/>
<circle cx="30" cy="26" r="7" fill="#fff" opacity=".8"/>
</svg>
</div>
</div>