Spaces:
Running
Running
File size: 1,866 Bytes
f3d4af6 9c0520a f3d4af6 9c0520a f3d4af6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
document.addEventListener('DOMContentLoaded', function() {
// Set random animation variables for each blob
const blobs = document.querySelectorAll('.blob');
blobs.forEach(blob => {
// Generate random values for translation and rotation
const tx = (Math.random() - 0.5) * 200;
const ty = (Math.random() - 0.5) * 200;
const r = (Math.random() - 0.5) * 360;
// Set CSS variables for the float animation
blob.style.setProperty('--tx', `${tx}px`);
blob.style.setProperty('--ty', `${ty}px`);
blob.style.setProperty('--r', `${r}deg`);
});
// Mouse move interaction
document.addEventListener('mousemove', (e) => {
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
blobs.forEach((blob, index) => {
// Apply slight movement based on mouse position
const moveX = (x - 0.5) * (index + 1) * 10;
const moveY = (y - 0.5) * (index + 1) * 10;
// Add unique movement to each blob
blob.style.transform = `translate(${moveX}px, ${moveY}px)`;
});
});
// Touch move interaction for mobile
document.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
const x = touch.clientX / window.innerWidth;
const y = touch.clientY / window.innerHeight;
blobs.forEach((blob, index) => {
const moveX = (x - 0.5) * (index + 1) * 5;
const moveY = (y - 0.5) * (index + 1) * 5;
blob.style.transform = `translate(${moveX}px, ${moveY}px)`;
});
});
// Reset transform when mouse leaves
document.addEventListener('mouseleave', () => {
blobs.forEach(blob => {
blob.style.transform = '';
});
});
});
|