CSSとJSで作る、ドラッグで3D空間を見渡せるギャラリー

const kumonosuScene = document.getElementById('kumonosu-scene');
const kumonosuLayers = document.querySelectorAll('.kumonosu-layer');
const kumonosuContainer = document.getElementById('kumonosu-container');
const kumonosuCloseOverlay = document.getElementById('kumonosu-close-overlay');
let isDragging = false;
let isSelected = false;
let startMouseX, startMouseY;
let startTargetX, startTargetY;
let currentX = 0,
	currentY = 0;
let targetX = 0,
	targetY = 0;
let dragMoved = false;
const dragThreshold = 5;
const sensitivity = 2.8;
const perspective = 1000;
const layerConfigs = [{
	id: 'kumonosu-layer-far-2',
	count: 70,
	range: 6000
}, {
	id: 'kumonosu-layer-far-1',
	count: 60,
	range: 5000
}, {
	id: 'kumonosu-layer-mid',
	count: 50,
	range: 4000
}, {
	id: 'kumonosu-layer-near-1',
	count: 40,
	range: 3000
}, {
	id: 'kumonosu-layer-near-2',
	count: 30,
	range: 2500
}];
layerConfigs.forEach(config => {
	const layerEl = document.getElementById(config.id);
	const layerDepth = parseFloat(layerEl.getAttribute('data-depth'));
	const speed = parseFloat(layerEl.getAttribute('data-speed'));
	for (let i = 0; i < config.count; i++) {
		const card = document.createElement('div');
		card.className = 'kumonosu-card';
		const posX = (Math.random() - 0.5) * config.range;
		const posY = (Math.random() - 0.5) * config.range;
		const posZ = (Math.random() - 0.5) * 300; // レイヤー内分散
		card.style.transform = `translate3d(${posX}px, ${posY}px, ${posZ}px)`;
		const seed = `${config.id}-${i}`;
		card.style.backgroundImage = `url('https://picsum.photos/seed/${seed}/400/550')`;
		card.dataset.x = posX;
		card.dataset.y = posY;
		card.dataset.z = posZ;
		card.dataset.layerDepth = layerDepth;
		card.dataset.speed = speed;
		card.addEventListener('click', (e) => {
			if (dragMoved || isSelected) return;
			e.stopPropagation();
			kumonosuSelectCard(card);
		});
		layerEl.appendChild(card);
	}
});

function kumonosuSelectCard(card) {
	isSelected = true;
	card.classList.add('kumonosu-is-selected');
	kumonosuScene.classList.add('kumonosu-has-selection');
	kumonosuCloseOverlay.classList.add('kumonosu-active');
	const speed = parseFloat(card.dataset.speed);
	targetX = -parseFloat(card.dataset.x) / speed;
	targetY = -parseFloat(card.dataset.y) / speed;
	const x = card.dataset.x;
	const y = card.dataset.y;
	const z = card.dataset.z;
	const lDepth = parseFloat(card.dataset.layerDepth);
	// --- 重要：3D遠近法を考慮した倍率計算 ---
	const totalZ = parseFloat(z) + lDepth;
	// 遠近法による見かけのスケール（手前ほど大きく、奥ほど小さい）
	const perspectiveFactor = perspective / (perspective - totalZ);
	// 画面の70%サイズを目標にする（余白を考慮して0.7）
	const targetVisualW = window.innerWidth * 0.7;
	const targetVisualH = window.innerHeight * 0.7;
	const cardW = 110; // CSSと同じ
	const cardH = 150; // CSSと同じ
	// 目標の「画面上の大きさ」にするための、純粋な2D倍率を計算
	const targetScale2D = Math.min(targetVisualW / cardW, targetVisualH / cardH);
	// 3Dの歪みを打ち消して、最終的にtargetScale2Dの大きさに見えるように調整
	const finalScale = targetScale2D / perspectiveFactor;
	card.style.transform = `translate3d(${x}px, ${y}px, ${z}px) scale(${finalScale})`;
}

function kumonosuDeselect() {
	const selectedCard = document.querySelector('.kumonosu-card.kumonosu-is-selected');
	if (selectedCard) {
		const x = selectedCard.dataset.x;
		const y = selectedCard.dataset.y;
		const z = selectedCard.dataset.z;
		selectedCard.style.transform = `translate3d(${x}px, ${y}px, ${z}px) scale(1)`;
		selectedCard.classList.remove('kumonosu-is-selected');
	}
	kumonosuScene.classList.remove('kumonosu-has-selection');
	kumonosuCloseOverlay.classList.remove('kumonosu-active');
	isSelected = false;
}
kumonosuCloseOverlay.addEventListener('click', kumonosuDeselect);
window.addEventListener('resize', () => {
	if (isSelected) kumonosuDeselect();
});
kumonosuContainer.addEventListener('mousedown', (e) => {
	if (isSelected) return;
	isDragging = true;
	dragMoved = false;
	startMouseX = e.pageX;
	startMouseY = e.pageY;
	startTargetX = targetX;
	startTargetY = targetY;
});
window.addEventListener('mousemove', (e) => {
	if (!isDragging) return;
	const dx = (e.pageX - startMouseX) * sensitivity;
	const dy = (e.pageY - startMouseY) * sensitivity;
	if (Math.abs(dx) > dragThreshold || Math.abs(dy) > dragThreshold) dragMoved = true;
	targetX = startTargetX + dx;
	targetY = startTargetY + dy;
});
window.addEventListener('mouseup', () => {
	isDragging = false;
});

function kumonosuUpdate() {
	currentX += (targetX - currentX) * 0.08;
	currentY += (targetY - currentY) * 0.08;
	kumonosuLayers.forEach(layer => {
		const speed = parseFloat(layer.getAttribute('data-speed'));
		const depth = layer.getAttribute('data-depth');
		layer.style.transform = `translate3d(${currentX * speed}px, ${currentY * speed}px, ${depth}px)`;
	});
	requestAnimationFrame(kumonosuUpdate);
}
kumonosuUpdate();