概要
スクロールに合わせてカードの山を配る・積む・奥へズーム・入れ替えるなど、4パターンの重なり演出を連続で見せるショーケース。
使用技術
・GSAP + ScrollTrigger（スクロール連動 / pin / scrub）
実装ポイント
・パターン1「配る」：上のカードから順に `xPercent`・`rotation` で左右交互に弾き飛ばし、`scrub` でスクロール量に同期
・パターン2「積む」：画面下に隠したカードを1枚ずつ `y:0`・`scale:1` へ戻し、ランダムな回転角で自然な重なりを演出
・パターン3「3D奥行き」：`z: -i*50` で初期に奥行きを付け、手前のカードを `z:600` へ飛ばしながら次のカードのオーバーレイを消して迫り出させる
・パターン4「入れ替え」：グラデーション層と画像層を左右に開き→`is-bottom` クラスで重なり順（z-index）をトグル→中央へ戻す3段階のタイムライン。`once: true` で一度だけ再生
コアスニペット
const tlDealing = gsap.timeline({
scrollTrigger: { trigger: dealingContainer, start: "top top", end: "+=2000", pin: true, scrub: 1 },
});
for (let i = 0; i < dealingCards.length - 1; i++) {
let card = dealingCards[i];
let direction = i % 2 === 0 ? 1 : -1;
tlDealing.to(card, {
xPercent: 120 * direction, yPercent: -20, rotation: 45 * direction,
opacity: 0, duration: 1, ease: "power1.in",
});
}