Spaces:
Paused
Paused
File size: 4,368 Bytes
b7a676b | 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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | // Custom cursor effect
document.addEventListener('DOMContentLoaded', function() {
// Use default browser cursor as fallback
document.body.classList.remove('custom-cursor');
// Create cursor elements
const cursorGlow = document.createElement('div');
cursorGlow.classList.add('cursor-glow');
document.body.appendChild(cursorGlow);
// Create delayed follow circle
const cursorFollow = document.createElement('div');
cursorFollow.classList.add('cursor-follow');
document.body.appendChild(cursorFollow);
// Variables for storing mouse position
let mouseX = 0;
let mouseY = 0;
let cursorX = 0;
let cursorY = 0;
// Update mouse position on mouse move
document.addEventListener('mousemove', function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
// Show the cursor glow and position it at the mouse coordinates
cursorGlow.style.opacity = '1';
cursorGlow.style.left = mouseX + 'px';
cursorGlow.style.top = mouseY + 'px';
});
// Animate the follow cursor with delay
function animateFollowCursor() {
// Calculate the distance between current position and target position
const dx = mouseX - cursorX;
const dy = mouseY - cursorY;
// Move the cursor a fraction of the distance (creates delay/easing effect)
cursorX += dx * 0.15;
cursorY += dy * 0.15;
// Apply the position
cursorFollow.style.left = cursorX + 'px';
cursorFollow.style.top = cursorY + 'px';
// Continue animation
requestAnimationFrame(animateFollowCursor);
}
// Start the animation
animateFollowCursor();
// Make cursor visible when mouse moves
document.addEventListener('mousemove', function() {
cursorFollow.style.opacity = '1';
cursorGlow.style.opacity = '0.9';
});
// Increase cursor glow size when hovering clickable elements
const clickableElements = document.querySelectorAll('a, button, input[type="submit"], .cta-button, .submit-button, .feature-card, .testimonial-card, .step-number, nav ul li a, .footer-links ul li a, input[type="checkbox"], input[type="radio"], select, .color-label, .checkbox-option');
clickableElements.forEach(element => {
element.addEventListener('mouseenter', function() {
cursorGlow.style.width = '70px';
cursorGlow.style.height = '70px';
cursorGlow.style.background = 'radial-gradient(circle, rgba(255, 143, 48, 0.6) 0%, rgba(255, 143, 48, 0) 70%)';
cursorFollow.style.borderColor = 'rgba(255, 143, 48, 1)';
cursorFollow.style.backgroundColor = 'rgba(255, 143, 48, 0.3)';
cursorFollow.style.width = '35px';
cursorFollow.style.height = '35px';
});
element.addEventListener('mouseleave', function() {
cursorGlow.style.width = '50px';
cursorGlow.style.height = '50px';
cursorGlow.style.background = 'radial-gradient(circle, rgba(55, 199, 255, 0.5) 0%, rgba(55, 199, 255, 0) 70%)';
cursorFollow.style.borderColor = 'rgba(55, 199, 255, 0.9)';
cursorFollow.style.backgroundColor = 'rgba(55, 199, 255, 0.2)';
cursorFollow.style.width = '25px';
cursorFollow.style.height = '25px';
});
});
// Hide cursor elements when mouse leaves the window
document.addEventListener('mouseout', function(e) {
if (e.relatedTarget === null) {
cursorGlow.style.opacity = '0';
cursorFollow.style.opacity = '0';
}
});
// Show cursor elements when mouse enters the window
document.addEventListener('mouseover', function() {
cursorGlow.style.opacity = '1';
cursorFollow.style.opacity = '1';
});
// Add cursor click effect
document.addEventListener('mousedown', function() {
cursorGlow.style.transform = 'translate(-50%, -50%) scale(0.9)';
cursorFollow.style.transform = 'translate(-50%, -50%) scale(0.5)';
});
document.addEventListener('mouseup', function() {
cursorGlow.style.transform = 'translate(-50%, -50%) scale(1)';
cursorFollow.style.transform = 'translate(-50%, -50%) scale(1)';
});
}); |