blob: b36ffb430f48162a237585b961e6fef6dbf3fc6d (
plain) (
blame)
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
|
document.addEventListener('DOMContentLoaded', () => {
// Get the body element to update the cursor position
const body = document.documentElement;
let mouseX = 0;
let mouseY = 0;
let smoothX = 0;
let smoothY = 0;
// Smoothing factor (lower = smoother, higher = snappier)
const smoothing = 0.1;
// Handle mouse movement
const handleMouseMove = (e) => {
mouseY = e.clientY + window.scrollY;
mouseX = e.clientX + window.scrollX;
};
// Smooth the cursor movement
const updateCursorLight = () => {
// Apply smoothing
smoothX += (mouseX - smoothX) * smoothing;
smoothY += (mouseY - smoothY) * smoothing;
// Update CSS variables for the cursor position
body.style.setProperty('--cursor-x', `${smoothX}px`);
body.style.setProperty('--cursor-y', `${smoothY}px`);
// Continue the animation loop
requestAnimationFrame(updateCursorLight);
};
// Add event listeners
window.addEventListener('mousemove', handleMouseMove);
// Handle touch events for mobile
window.addEventListener('touchmove', (e) => {
e.preventDefault();
const touch = e.touches[0];
handleMouseMove({
clientX: touch.clientX,
clientY: touch.clientY
});
}, { passive: false });
// Initialize cursor position to center of screen
mouseX = window.innerWidth / 2;
mouseY = window.innerHeight / 2;
smoothX = mouseX;
smoothY = mouseY;
// Start the animation loop
updateCursorLight();
});
|
