概要
アクティブなカードを手前に、後続カードを右奥へ階段状にずらして重ねる、サービス紹介・特徴訴求向けのカードスライダー。
使用技術
・GSAP（トゥイーン）
・CSS 3D Transform（perspective / preserve-3d）
・Glassmorphism（backdrop-filter: blur）
実装ポイント
・スライドデータとSVGアイコンをJS配列で保持し、カードとインジケーターをDOM生成
・現在位置からの差分 `diff` を剰余で求め、`translateX`・`scale`・`opacity`・`zIndex`・`rotateY` を段階的に計算して奥行き表現。`maxVisible` を超えたカードは右奥へ退避
・前後ボタン・インジケーター・キーボード矢印・タッチスワイプ（`touchstart`/`touchend` の座標差で判定）と多彩な操作に対応
・`isAnimating` フラグと `setTimeout` で連打時の多重発火を防止
コアスニペット
cards.forEach((card, index) => {
const diff = (index - currentIndex + slides.length) % slides.length;
if (diff >= maxVisible) {
gsap.to(card, { x: 600, scale: 0.5, opacity: 0, zIndex: 0, rotateY: 20, duration: 0.6, ease: "power3.out" });
} else {
const translateX = diff * 190;
const scale = 1 - diff * 0.1;
const opacity = diff === 0 ? 1 : 1 - diff * 0.4;
const zIndex = slides.length - diff;
const rotateY = diff * 5;
gsap.to(card, { x: translateX, scale, opacity, zIndex, rotateY, duration: 0.6, ease: "power3.out" });
}
});