diff --git a/index.html b/index.html index d4a1f419..9f624b65 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 930c9955..240ccb46 100644 --- a/style.css +++ b/style.css @@ -8,6 +8,7 @@ body{ background-color: black; overflow-x: hidden; + cursor: none; } :root { @@ -720,6 +721,18 @@ body{ cursor: pointer; } +/*custom cursor*/ +.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; +} + /*Drop down*/ ul li ul.dropdown { width: auto; @@ -760,3 +773,4 @@ ul li ul.dropdown li a:hover { } /* Optional: styling for active links */ +