EC・商品
カート投入アニメ
「カートに入れる」ボタンで商品サムネがカートアイコンへ放物線を描いて飛び込み、バッジ数が +1 される。タップでも動作。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="atc-scene">
<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>