diff --git a/JS/custom-cursor-car.js b/JS/custom-cursor-car.js new file mode 100644 index 0000000..d05a4b3 --- /dev/null +++ b/JS/custom-cursor-car.js @@ -0,0 +1,58 @@ +document.addEventListener("DOMContentLoaded", function () { + const img = document.createElement("img"); + img.src = "images/Car-Icon.png"; + img.style.position = "absolute"; + img.style.pointerEvents = "none"; + img.style.transform = "translate(-50%, -50%)"; + img.style.width = "32px"; + img.style.height = "32px"; + img.style.transition = "transform 0.1s linear"; + document.body.appendChild(img); + + document.body.style.cursor = "none"; // Hide all cursors + + const clickableElements = document.querySelectorAll("a, button, input, [role='button'], textarea, select"); + + clickableElements.forEach(element => { + element.style.cursor = "none"; // Hide cursor for clickable and typeable elements + }); + + let mouseX = 0; + let mouseY = 0; + + document.addEventListener("mousemove", (e) => { + mouseX = e.clientX; + mouseY = e.clientY + window.scrollY; + }); + + function updateCursorImage() { + img.style.left = `${mouseX}px`; + img.style.top = `${mouseY}px`; + requestAnimationFrame(updateCursorImage); + } + + updateCursorImage(); + + document.querySelectorAll("a, button, input, [role='button']").forEach(element => { + element.addEventListener("mouseenter", () => { + let angle = 0; + img.rotationInterval = setInterval(() => { + angle += 10; + img.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`; + }, 50); + }); + element.addEventListener("mouseleave", () => { + clearInterval(img.rotationInterval); + img.style.transform = "translate(-50%, -50%)"; + }); + }); + + document.querySelectorAll("iframe").forEach(iframe => { + iframe.addEventListener("mouseenter", () => { + img.style.display = "none"; + }); + iframe.addEventListener("mouseleave", () => { + img.style.display = "block"; + }); + }); +});