Cursor Update

vinodjangid07 · Mar 2, 2024 · 84d6b48 · 84d6b48
1 parent 3cc69ff
commit 84d6b48
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -83,8 +83,8 @@
     <noscript>Allow Javascript</noscript>
 
     <header> 
-
-        <div class="cursor outer"></div>
+        <div class="cursor-inner" id="cursor-inner"></div>
+        <div class="cursor-outer" id="cursor-outer"></div>
 
 
         <div class="navbar" id="navbar">
@@ -423,10 +423,9 @@
 
     </footer>
     <!-- footer ends here -->
-
-</body>
 
-<script src="main.js"></script> 
+
+    <script src="main.js"></script> 
 
     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
     <script>
@@ -443,30 +442,51 @@
 
 
 <script>
-   const cursor = document.querySelector(".cursor");
+
+
+const cursorInner = document.getElementById("cursor-inner"); 
+const cursorOuter = document.getElementById("cursor-outer");
 const links = document.querySelectorAll("a,label,button");
 
-window.addEventListener("mousemove",  (e) => {
-
-  let x = e.pageX;
-  let y = e.pageY;
-
-
-  cursor.style.left = `${x}px`;
-  cursor.style.top = `${y}px`;
+document.addEventListener("mousemove", function(e) {
+  const posX = e.clientX;
+  const posY = e.clientY;
+
+  cursorInner.style.left = `${posX}px`;
+  cursorInner.style.top = `${posY}px`;
+
+  // cursorOuter.style.left = `${posX}px`;
+  // cursorOuter.style.top = `${posY}px`;
+
+
+  cursorOuter.animate({
+  left: `${posX}px`,
+  top: `${posY}px`
+}, {duration: 500, fill: "forwards"});
+
+
+
 
     links.forEach(link => {
       link.addEventListener("mouseenter", () => {
-        cursor.classList.add("hover");
+        cursorInner.classList.add("hover");
+        cursorOuter.classList.add("hover");
       })
       link.addEventListener("mouseleave", () => {
-        cursor.classList.remove("hover");
+        cursorInner.classList.remove("hover");
+        cursorOuter.classList.remove("hover");
       })
     })
 
 
+
+});
+
 
-})
     </script>
+
+</body>
+
+
 
 </html>
diff --git a/style.css b/style.css
@@ -78,29 +78,43 @@ html {
 body{
     background-color: var(--color-dark-mode);
     overflow-x: hidden;
+    /* cursor: none; */
 }
 
 
-.cursor {
-    z-index: 999999999;
-    position: absolute;
-    height: 25px;
-    width: 25px;
-    border-radius: 50%;
+.cursor-inner{
+    width: 8px;
+    height: 8px;
+    background-color: var(--color-light-blue);
+}
+.cursor-outer{
+    width: 35px;
+    height: 35px;
+    border: 2px solid white;
+}
+.cursor-inner,
+.cursor-outer{
+    position: fixed;
+    top: 0;
+    left: 0;
     transform: translate(-50%, -50%);
+    border-radius: 50%;
+    z-index: 9999;
     pointer-events: none;
-  }
-
-  .outer {
-    border: 1px solid #8BA1F2;
-  }
-
-  .cursor.hover {
-    transform: translate(-50%, -50%) scale(2);
-    transition: transform 250ms ease-in-out;
-  }
-
-
+}
+.cursor-inner.hover{
+    width: 25px;
+    height: 25px;
+    transition: all .2s;
+    mix-blend-mode: difference;
+}
+.cursor-outer.hover{
+    width: 50px;
+    height: 50px;
+    transition: all .2s;
+}
+
+
 /* for light mode */
 .light-mode{
     --color-dark-mode:#ece7e1;
@@ -743,6 +757,7 @@ noscript{
     height: 40px;
     border-radius: 0px;
     cursor: pointer;
+    transition: all .3s;
 
   }
 
@@ -1475,7 +1490,8 @@ border: none;
     .blob{
         display: none;
     }
-    .cursor{
+    .cursor-inner,
+    .cursor-outer{
         display: none;
     }
     .navbar-tabs-ul{