58 lines
2.0 KiB
JavaScript
58 lines
2.0 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const root = document.documentElement;
|
|
const scene = document.getElementById('space-scene');
|
|
const stage = document.getElementById('error-stage');
|
|
const parallaxItems = Array.from(document.querySelectorAll('.parallax-item'));
|
|
const backLink = document.querySelector('[data-action="back"]');
|
|
|
|
const moveScene = (clientX, clientY) => {
|
|
const xRatio = clientX / window.innerWidth - 0.5;
|
|
const yRatio = clientY / window.innerHeight - 0.5;
|
|
|
|
root.style.setProperty('--pointer-x', `${clientX}px`);
|
|
root.style.setProperty('--pointer-y', `${clientY}px`);
|
|
|
|
parallaxItems.forEach((item) => {
|
|
const depth = Number.parseFloat(item.dataset.depth || '0');
|
|
const moveX = xRatio * depth;
|
|
const moveY = yRatio * depth;
|
|
item.style.transform = `translate3d(${moveX}px, ${moveY}px, 0)`;
|
|
});
|
|
};
|
|
|
|
document.addEventListener('pointermove', (event) => {
|
|
moveScene(event.clientX, event.clientY);
|
|
}, { passive: true });
|
|
|
|
const spawnWave = (clientX, clientY) => {
|
|
if (!scene) return;
|
|
const wave = document.createElement('span');
|
|
wave.className = 'stellar-wave';
|
|
wave.style.left = `${clientX}px`;
|
|
wave.style.top = `${clientY}px`;
|
|
scene.appendChild(wave);
|
|
window.setTimeout(() => wave.remove(), 1600);
|
|
};
|
|
|
|
stage?.addEventListener('click', (event) => {
|
|
spawnWave(event.clientX, event.clientY);
|
|
});
|
|
|
|
backLink?.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
if (window.history.length > 1) {
|
|
window.history.back();
|
|
return;
|
|
}
|
|
window.location.href = '/';
|
|
});
|
|
|
|
window.addEventListener('blur', () => {
|
|
parallaxItems.forEach((item) => {
|
|
item.style.transform = 'translate3d(0, 0, 0)';
|
|
});
|
|
});
|
|
|
|
moveScene(window.innerWidth / 2, window.innerHeight / 2);
|
|
});
|