CSSとJSで作る、ドラッグやスクロールで自由に選べる没入型ギャラリー

const winesData = [{
	year: 2018,
	name: "Muscat Ottonel",
	region: "France",
	img: "https://kumonosu.net/wp-content/uploads/2026/01/adsense.jpg"
}, {
	year: 2015,
	name: "Cabernet Franc",
	region: "France",
	img: "https://kumonosu.net/wp-content/uploads/2026/01/176f.jpg"
}, {
	year: 2017,
	name: "Pinot Grigio",
	region: "France",
	img: "https://kumonosu.net/wp-content/uploads/2026/01/176c.jpg"
}, {
	year: 2013,
	name: "Cabernet Sauvignon",
	region: "France",
	img: "https://kumonosu.net/wp-content/uploads/2026/01/176d.jpg"
}, {
	year: 2016,
	name: "Sauvignon Blanc",
	region: "France",
	img: "https://kumonosu.net/wp-content/uploads/2026/01/176b.jpg"
}, {
	year: 2014,
	name: "Merlot Reserve",
	region: "France",
	img: "https://kumonosu.net/wp-content/uploads/2026/01/176a.jpg"
}, {
	year: 2019,
	name: "Syrah Blend",
	region: "France",
	img: "https://kumonosu.net/wp-content/uploads/2026/01/176g.jpg"
}, {
	year: 2011,
	name: "Chardonnay",
	region: "France",
	img: "https://kumonosu.net/wp-content/uploads/2026/01/176e.jpg"
}, {
	year: 2012,
	name: "Rose D'Anjou",
	region: "France",
	img: "https://kumonosu.net/wp-content/uploads/2026/01/260114c.jpeg"
}, {
	year: 2020,
	name: "Pinot Noir",
	region: "France",
	img: "https://kumonosu.net/wp-content/uploads/2026/01/260114b.jpeg"
}, {
	year: 2010,
	name: "Malbec",
	region: "France",
	img: "https://kumonosu.net/wp-content/uploads/2026/01/260114a.jpeg"
}, {
	year: 2021,
	name: "Riesling",
	region: "France",
	img: "https://kumonosu.net/wp-content/uploads/2026/02/neon26.jpg"
}, {
	year: 2014,
	name: "Merlot Reserve",
	region: "France",
	img: "https://kumonosu.net/wp-content/uploads/2026/01/176a.jpg"
}, {
	year: 2019,
	name: "Syrah Blend",
	region: "France",
	img: "https://kumonosu.net/wp-content/uploads/2026/01/176g.jpg"
}, {
	year: 2011,
	name: "Chardonnay",
	region: "France",
	img: "https://kumonosu.net/wp-content/uploads/2026/01/176e.jpg"
}];
const canvas = document.getElementById('kumonosu-canvas');
const yearDisplay = document.getElementById('kumonosu-year-display');
const loader = document.getElementById('kumonosu-loader');
// 1. グリッドの生成
winesData.forEach(wine => {
	const div = document.createElement('div');
	div.className = 'kumonosu-wine-item';
	div.dataset.year = wine.year;
	div.innerHTML = `
                <div class="kumonosu-wine-bottle-container">
                    <img src="${wine.img}" alt="${wine.name}" class="kumonosu-wine-bottle" loading="lazy">
                </div>
                <div class="kumonosu-wine-info">
                    <div class="kumonosu-wine-year-small kumonosu-serif italic">${wine.year}</div>
                    <div class="kumonosu-wine-name text-white">${wine.name}</div>
                    <div class="text-[9px] uppercase tracking-[0.2em] opacity-50">${wine.region}</div>
                </div>
            `;
	canvas.appendChild(div);
});
// 2. 位置管理
let scrollX = -2000;
let scrollY = -2000;
let isMoving = false;
let lastX, lastY;
let activeYear = "";
let moveTimeout;
const updateYearBackground = () => {
	const centerX = window.innerWidth / 2;
	const centerY = window.innerHeight / 2;
	const items = document.querySelectorAll('.kumonosu-wine-item');
	let closestYear = "";
	let minDistance = Infinity;
	items.forEach(item => {
		const rect = item.getBoundingClientRect();
		const dx = centerX - (rect.left + rect.width / 2);
		const dy = centerY - (rect.top + rect.height / 2);
		const dist = dx * dx + dy * dy;
		if (dist < minDistance) {
			minDistance = dist;
			closestYear = item.dataset.year;
		}
	});
	if (activeYear !== closestYear) {
		activeYear = closestYear;
		yearDisplay.classList.remove('kumonosu-visible');
		setTimeout(() => {
			yearDisplay.innerText = activeYear;
			yearDisplay.classList.add('kumonosu-visible');
		}, 300);
	}
};
const updateTransform = () => {
	canvas.style.transform = `translate3d(${scrollX}px, ${scrollY}px, 0)`;
	updateYearBackground();
};
const snapToNearest = () => {
	const centerX = window.innerWidth / 2;
	const centerY = window.innerHeight / 2;
	const items = document.querySelectorAll('.kumonosu-wine-item');
	let closestItem = null;
	let minDistance = Infinity;
	items.forEach(item => {
		const rect = item.getBoundingClientRect();
		const itemCenterX = rect.left + rect.width / 2;
		const itemCenterY = rect.top + rect.height / 2;
		const dist = Math.hypot(centerX - itemCenterX, centerY - itemCenterY);
		if (dist < minDistance) {
			minDistance = dist;
			closestItem = item;
		}
	});
	if (closestItem) {
		const rect = closestItem.getBoundingClientRect();
		scrollX += centerX - (rect.left + rect.width / 2);
		scrollY += centerY - (rect.top + rect.height / 2);
		canvas.classList.remove('kumonosu-is-moving');
		updateTransform();
	}
	isMoving = false;
};
const startMove = (x, y) => {
	isMoving = true;
	lastX = x;
	lastY = y;
	canvas.classList.add('kumonosu-is-moving');
	clearTimeout(moveTimeout);
};
const onMove = (x, y) => {
	if (!isMoving) return;
	scrollX += x - lastX;
	scrollY += y - lastY;
	lastX = x;
	lastY = y;
	updateTransform();
};
const endMove = () => {
	if (!isMoving) return;
	snapToNearest();
};
// イベント登録
window.addEventListener('mousedown', e => startMove(e.pageX, e.pageY));
window.addEventListener('mousemove', e => onMove(e.pageX, e.pageY));
window.addEventListener('mouseup', endMove);
window.addEventListener('touchstart', e => startMove(e.touches[0].pageX, e.touches[0].pageY), {
	passive: false
});
window.addEventListener('touchmove', e => onMove(e.touches[0].pageX, e.touches[0].pageY), {
	passive: false
});
window.addEventListener('touchend', endMove);
window.addEventListener('wheel', e => {
	if (!isMoving) {
		isMoving = true;
		canvas.classList.add('kumonosu-is-moving');
	}
	scrollX -= e.deltaX;
	scrollY -= e.deltaY;
	updateTransform();
	clearTimeout(moveTimeout);
	moveTimeout = setTimeout(endMove, 150);
}, {
	passive: true
});
// 初期化
window.onload = () => {
	loader.classList.add('kumonosu-hidden');
	updateTransform();
	setTimeout(snapToNearest, 100);
};
// リサイズ対応
window.addEventListener('resize', () => {
	snapToNearest();
});