34 lines
1.1 KiB
JavaScript
34 lines
1.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const cards = Array.from(document.querySelectorAll('[data-drift]'));
|
|
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
|
|
if (!cards.length || reduceMotion) {
|
|
return;
|
|
}
|
|
|
|
const updateCard = (card, xRatio, yRatio) => {
|
|
const depth = Number(card.dataset.drift || 10);
|
|
const offsetX = xRatio * depth;
|
|
const offsetY = yRatio * depth;
|
|
card.style.transform = `translate3d(${offsetX.toFixed(2)}px, ${offsetY.toFixed(2)}px, 0)`;
|
|
};
|
|
|
|
const resetCard = (card) => {
|
|
card.style.transform = '';
|
|
};
|
|
|
|
cards.forEach((card, index) => {
|
|
card.style.animation = `floaty ${9 + (index % 4)}s ease-in-out ${index * -0.8}s infinite`;
|
|
});
|
|
|
|
window.addEventListener('mousemove', (event) => {
|
|
const xRatio = (event.clientX / window.innerWidth - 0.5) * 1.2;
|
|
const yRatio = (event.clientY / window.innerHeight - 0.5) * 1.2;
|
|
cards.forEach((card) => updateCard(card, xRatio, yRatio));
|
|
}, { passive: true });
|
|
|
|
window.addEventListener('mouseleave', () => {
|
|
cards.forEach(resetCard);
|
|
});
|
|
});
|