Merge pull request #1122 from chaanakyaaM/main

custom cursor added
khushi-joshi-05 · Jun 22, 2024 · 2148261 · 2148261
2 parents 0768a29 + 020ac56
commit 2148261
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -35,6 +35,7 @@
 </head>
 
 <body>
+    <div class="dot"></div>
     <div id="loader-wrapper">
         <div id="loader"></div>
         <div class="loader-section section-left"></div>

diff --git 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
@@ -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 */
+