From bbf6e1ea52b087d0fe6cb2c2ba90436c63b69bf3 Mon Sep 17 00:00:00 2001 From: chaanakyaaM Date: Wed, 19 Jun 2024 18:29:29 +0530 Subject: [PATCH] custom cursor added --- index.html | 1 + script.js | 36 ++++++++++++++++++++++++++++++++++++ style.css | 12 ++++++++++++ 3 files changed, 49 insertions(+) diff --git a/index.html b/index.html index ef3fef1d..7faea304 100644 --- a/index.html +++ b/index.html @@ -35,6 +35,7 @@ +
diff --git a/script.js b/script.js index bb941961..5e43c452 100644 --- a/script.js +++ b/script.js @@ -1,3 +1,39 @@ +const dots = []; +const cursor = { + x: 0, + y: 0, +}; + +for (let i = 0; i < 10; i++) { + const dot = document.createElement("div"); + dot.style.scale=`0.${10-(i)}`; + dot.className = "dot"; + document.body.appendChild(dot); + dots.push(dot); +} + +document.addEventListener("mousemove", (e) => { + cursor.x = e.clientX; + cursor.y = e.clientY; +}); + +function draw() { + let x = cursor.x; + let y = cursor.y; + + dots.forEach((dot, index) => { + const nextDot = dots[index + 1] || dots[0]; + + dot.style.left = x + "px"; + dot.style.top = y + "px"; + + x += (nextDot.offsetLeft - dot.offsetLeft) * 0.5; + y += (nextDot.offsetTop - dot.offsetTop) * 0.5; + }); +} + +setInterval(draw, 10); + document.getElementById("copyright-year").textContent = new Date().getFullYear(); diff --git a/style.css b/style.css index 639fbee6..4039a152 100644 --- a/style.css +++ b/style.css @@ -8,6 +8,7 @@ body{ background-color: black; overflow-x: hidden; + cursor: none; } :root { @@ -718,4 +719,15 @@ body{ .summery:hover { cursor: pointer; +} + +.dot { + width: 30px; + height: 30px; + background: rgb(194, 194, 194); + position: fixed; + border-radius: 50%; + pointer-events: none; + transform: translate(-50%, -50%); + z-index: 9999; } \ No newline at end of file