From 42e1d00c76897819abceeba40f24cf8c4a81364f Mon Sep 17 00:00:00 2001 From: Samlon Date: Thu, 24 Jul 2025 13:10:02 +0200 Subject: add js to background --- js/gradient.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 js/gradient.js (limited to 'js') diff --git a/js/gradient.js b/js/gradient.js new file mode 100644 index 0000000..1fe1e63 --- /dev/null +++ b/js/gradient.js @@ -0,0 +1,53 @@ +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) => { + mouseX = e.clientX; + mouseY = e.clientY; + }; + + // 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(); +}); -- cgit v1.2.3