CSSとJSだけで作る、3Dフリップがめくれるスクロールアニメーション

const KUMONOSU_CONFIG = {
	pc: {
		front: 'https://kumonosu.net/wp-content/uploads/2026/04/260408a.jpg.webp',
		back: 'https://kumonosu.net/wp-content/uploads/2026/04/260408b.jpg.webp',
		cols: 6,
		rows: 6,
		aspect: 1536 / 975
	},
	sp: {
		front: 'https://kumonosu.net/wp-content/uploads/2026/04/260408a_sp.jpg.webp',
		back: 'https://kumonosu.net/wp-content/uploads/2026/04/260408b_sp.jpg.webp',
		cols: 3,
		rows: 6,
		aspect: 750 / 1334
	},
	breakpoint: 768
};
const gridContainer = document.getElementById('kumonosu-grid-container');
let kumonosuPanels = [];
let kumonosuFlipTl;
let kumonosuIsFlipped = false;

function initKumonosuApp() {
	if (kumonosuFlipTl) kumonosuFlipTl.kill();
	gridContainer.innerHTML = '';
	kumonosuPanels = [];
	const vw = window.innerWidth;
	const vh = window.innerHeight;
	const isMobile = vw <= KUMONOSU_CONFIG.breakpoint;
	const mode = isMobile ? KUMONOSU_CONFIG.sp : KUMONOSU_CONFIG.pc;
	gridContainer.style.gridTemplateColumns = `repeat(${mode.cols}, 1fr)`;
	gridContainer.style.gridTemplateRows = `repeat(${mode.rows}, 1fr)`;
	const imgAspect = mode.aspect;
	const winAspect = vw / vh;
	let bgSizeW, bgSizeH;
	if (winAspect > imgAspect) {
		bgSizeW = vw;
		bgSizeH = vw / imgAspect;
	} else {
		bgSizeW = vh * imgAspect;
		bgSizeH = vh;
	}
	const offsetX = (vw - bgSizeW) / 2;
	const offsetY = (vh - bgSizeH) / 2;
	for (let i = 0; i < mode.rows * mode.cols; i++) {
		const panel = document.createElement('div');
		panel.className = 'kumonosu-panel';
		const colIndex = i % mode.cols;
		const rowIndex = Math.floor(i / mode.cols);
		// 各タイルのピクセルサイズと座標を精密に計算
		const tileW = vw / mode.cols;
		const tileH = vh / mode.rows;
		const posX = colIndex * tileW;
		const posY = rowIndex * tileH;
		const bgX = -(posX - offsetX);
		const bgY = -(posY - offsetY);
		panel.innerHTML = `
                    <div class="kumonosu-panel-item" data-panel-item="front" 
                         style="background-image: url(${mode.front}); background-size: ${bgSizeW}px ${bgSizeH}px; background-position: ${bgX}px ${bgY}px;"></div>
                    <div class="kumonosu-panel-item" data-panel-item="back" 
                         style="background-image: url(${mode.back}); background-size: ${bgSizeW}px ${bgSizeH}px; background-position: ${bgX}px ${bgY}px;"></div>
                `;
		gridContainer.appendChild(panel);
		kumonosuPanels.push(panel);
	}
	buildKumonosuTimeline();
	if (kumonosuIsFlipped) {
		gsap.set(kumonosuPanels, {
			rotateX: -180,
			scale: 1.01
		}); // めくれた状態では少し拡大して隙間を埋める
		gsap.set(gridContainer, {
			gap: 0,
			z: 0
		});
		gsap.set(".kumonosu-panel-item", {
			borderRadius: 0
		});
		kumonosuFlipTl.progress(1);
	}
}

function buildKumonosuTimeline() {
	kumonosuFlipTl = gsap.timeline({
		paused: true,
		onComplete: () => {
			kumonosuIsFlipped = true;
		},
		onReverseComplete: () => {
			kumonosuIsFlipped = false;
		}
	});
	// 1. 回転アニメーション
	kumonosuFlipTl.to(kumonosuPanels, {
		duration: 1.3,
		rotateX: -180,
		ease: "elastic.out(0.8, 0.4)",
		stagger: {
			each: 0.006,
			from: "random"
		}
	}, 0);
	// 2. 隙間、奥行きの解消 + 【重要】スケールをわずかに大きくして隙間を埋める
	kumonosuFlipTl.to(gridContainer, {
		gap: 0,
		z: 0,
		duration: 0.2,
		ease: "power3.inOut"
	}, 0.4);
	// 3. タイル自体を1%大きくして、隣と重ねることで境界線の隙間を消す
	kumonosuFlipTl.to(kumonosuPanels, {
		scale: 1.01, // 1.01倍にすることで物理的な隙間を覆い隠す
		duration: 0.2
	}, 0.4);
	// 4. 角の丸みを消す
	kumonosuFlipTl.to(".kumonosu-panel-item", {
		borderRadius: 0,
		duration: 0.1
	}, 0.6);
}
initKumonosuApp();
let kumonosuResizeTimer;
window.addEventListener('resize', () => {
	clearTimeout(kumonosuResizeTimer);
	kumonosuResizeTimer = setTimeout(initKumonosuApp, 200);
});
const handleKumonosuWheel = (e) => {
	if (e.deltaY > 0 && !kumonosuIsFlipped) kumonosuFlipTl.play();
	else if (e.deltaY < 0 && kumonosuIsFlipped) kumonosuFlipTl.reverse();
};
window.addEventListener('wheel', handleKumonosuWheel, {
	passive: false
});
let kumonosuTouchStart = 0;
window.addEventListener('touchstart', (e) => {
	kumonosuTouchStart = e.touches[0].clientY;
}, {
	passive: true
});
window.addEventListener('touchmove', (e) => {
	const touchEnd = e.touches[0].clientY;
	const diff = kumonosuTouchStart - touchEnd;
	if (diff > 10 && !kumonosuIsFlipped) kumonosuFlipTl.play();
	else if (diff < -10 && kumonosuIsFlipped) kumonosuFlipTl.reverse();
}, {
	passive: false
});