Merge pull request #3101 from MitulSonagara/mouse_transition_effect

Mouse transition effect
kunjgit · May 12, 2024 · bc1b536 · bc1b536
2 parents 256686c + f5447c8
commit bc1b536
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 2 deletions.
diff --git a/assets/css/cursor_transition.css b/assets/css/cursor_transition.css
@@ -0,0 +1,36 @@
+.cursor {
+    z-index: 999;
+    position: fixed;
+    background: #23bdf5;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 0 20px #23bdf5,
+        0 0 60px #23bdf5,
+        0 0 100px #23bdf5;
+    animation: colors 1s infinite;
+    transform: translate(-50%, -50%);
+    display: none;
+}
+
+@keyframes colors {
+    0% {
+        filter: hue-rotate(0deg);
+    }
+
+    100% {
+        filter: hue-rotate(360deg);
+    }
+}
+
+.cursor:before {
+    content: '';
+    position: absolute;
+    background: #23bdf5;
+    width: 50px;
+    height: 50px;
+    opacity: 0.2;
+    transform: translate(-30%, -30%);
+    border-radius: 50%;
+}
diff --git a/assets/js/cursor_transition.js b/assets/js/cursor_transition.js
@@ -0,0 +1,28 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const cursor = document.querySelector(".cursor");
+    var timeout;
+
+    document.addEventListener("mousemove", (e) => {
+      let x = e.clientX;
+      let y = e.clientY;
+
+      cursor.style.top = y + "px";
+      cursor.style.left = x + "px";
+      cursor.style.display = "block";
+
+      function mouseStopped() {
+        cursor.style.display = "none";
+      }
+
+      clearTimeout(timeout);
+      timeout = setTimeout(mouseStopped, 1000);
+    });
+
+    document.addEventListener("scroll", () => {
+      cursor.style.display = "none";
+    });
+
+    document.addEventListener("mouseout", () => {
+      cursor.style.display = "none";
+    });
+  });
diff --git a/index.html b/index.html
@@ -49,6 +49,7 @@
   <link rel="stylesheet" href="./assets/css/gameCard.css">
   <link rel="stylesheet" href="./assets/css/navbar.css">
   <link rel="stylesheet" href="./assets/css/gameCard.css">
+  <link rel="stylesheet" href="./assets/css/cursor_transition.css">
 
   <!--
     - google font link
@@ -75,7 +76,7 @@
 </label> -->
 
 <body>
-
+  <div class="cursor"></div>
   <!-- BACKGROUND PARTICLES -->
   <!-- <div class="page-bg"></div> -->
   <!-- <div class="animation-wrapper"> -->
@@ -233,6 +234,8 @@ <h1>Our Valuable Contributors</h1>
   <script src="./assets/js/script.js"></script>
   <script src="./assets/js/scroll.js"></script>
   <script src="./assets/js/contributors.js"></script>
+  <script src="./assets/js/cursor_transition.js"></script>
+
 
 
   <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
@@ -251,4 +254,4 @@ <h1>Our Valuable Contributors</h1>
 
 </body>
 
-</html>
+</html>