File size: 2,275 Bytes
c487bfb d80e76f c487bfb |
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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
// Futuristic cursor effect
document.addEventListener('DOMContentLoaded', () => {
// Create custom cursor
const cursor = document.createElement('div');
cursor.style.position = 'fixed';
cursor.style.width = '20px';
cursor.style.height = '20px';
cursor.style.borderRadius = '50%';
cursor.style.backgroundColor = 'rgba(0, 240, 255, 0.5)';
cursor.style.pointerEvents = 'none';
cursor.style.zIndex = '9999';
cursor.style.transform = 'translate(-50%, -50%)';
cursor.style.mixBlendMode = 'exclusion';
cursor.style.transition = 'transform 0.1s ease, width 0.3s ease, height 0.3s ease';
document.body.appendChild(cursor);
// Create cursor trail
const trail = document.createElement('div');
trail.style.position = 'fixed';
trail.style.width = '40px';
trail.style.height = '40px';
trail.style.borderRadius = '50%';
trail.style.border = '1px solid rgba(0, 240, 255, 0.3)';
trail.style.pointerEvents = 'none';
trail.style.zIndex = '9998';
trail.style.transform = 'translate(-50%, -50%)';
trail.style.transition = 'transform 0.4s ease, opacity 0.4s ease';
document.body.appendChild(trail);
document.addEventListener('mousemove', (e) => {
cursor.style.left = `${e.clientX}px`;
cursor.style.top = `${e.clientY}px`;
setTimeout(() => {
trail.style.left = `${e.clientX}px`;
trail.style.top = `${e.clientY}px`;
trail.style.opacity = '1';
}, 100);
});
document.addEventListener('mouseleave', () => {
trail.style.opacity = '0';
});
document.addEventListener('mousedown', () => {
cursor.style.width = '15px';
cursor.style.height = '15px';
});
document.addEventListener('mouseup', () => {
cursor.style.width = '20px';
cursor.style.height = '20px';
});
// Add hover effects
const hoverElements = document.querySelectorAll('a, button, [data-hover]');
hoverElements.forEach(el => {
el.addEventListener('mouseenter', () => {
cursor.style.width = '40px';
cursor.style.height = '40px';
cursor.style.backgroundColor = 'rgba(255, 0, 240, 0.7)';
});
el.addEventListener('mouseleave', () => {
cursor.style.width = '20px';
cursor.style.height = '20px';
cursor.style.backgroundColor = 'rgba(0, 240, 255, 0.5)';
});
});
|