Merge pull request #41 from Speedysays01/MouseFollower

Added a mouse follower
akhileshverma92 · Oct 4, 2024 · beab801 · beab801
2 parents da11bdf + 7a2b459
commit beab801
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -31,7 +31,8 @@
             </ul>
         </div>
     </nav>
-
+
+    <div class="mouse-follower" id="mouseFollower"> </div>
     <div class="hero">
         <video autoplay muted loop id="background-video">
             <source src="assets/videos/bg.mp4" type="video/mp4">
@@ -117,6 +118,9 @@ <h2>Register Now</h2>
             </form>
         </div>
     </section>
+
+
+
 
     <footer>
         <p>&copy; 2024 College Club. All rights reserved.</p>

diff --git a/script.js b/script.js
@@ -74,4 +74,14 @@ document.getElementById('registration-form').addEventListener('submit', function
       const target = this.getAttribute('href'); // Get the target section ID
       smoothScroll(target); // Call the smooth scroll function
     });
-  });
+  });
+
+
+  document.addEventListener("mousemove", function (e) {
+    const follower = document.getElementById("mouseFollower");
+
+    // Move the follower div to the mouse position
+    follower.style.left = `${e.clientX}px`;
+    follower.style.top = `${e.clientY}px`;
+  });
+
diff --git a/style.css b/style.css
@@ -577,6 +577,22 @@ footer {
 }
 
 
+/* Mouse follower*/
+/* Make the mouse follower element */
+.mouse-follower {
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: rgba(190, 190, 190, 0.5);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    z-index: 9999;
+    transition: transform 0.1s ease;
+  }
+
+
+
 /* Animations */
 @keyframes fadeIn {
     from {