From c4e1425a8e421a9cdb91f87876850f760fbf3eb4 Mon Sep 17 00:00:00 2001
From: anuj <anujkashyap@email.com>
Date: Thu, 30 Jan 2025 01:24:49 -0800
Subject: [PATCH] done mousefollwer

---
 sticky-navigation/index.html |  2 ++
 sticky-navigation/script.js  | 19 ++++++++++++++++++-
 sticky-navigation/style.css  | 12 ++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)
diff --git a/sticky-navigation/index.html b/sticky-navigation/index.html
index d793d0d..8b7a24f 100644
--- a/sticky-navigation/index.html
+++ b/sticky-navigation/index.html
@@ -7,6 +7,8 @@
     <title>Sticky Navigation</title>
   </head>
   <body>
+
+    <div id="mousefollower"></div>
     <nav class="nav">
       <div class="container">
         <h1 class="logo"><a href="/index.html">My Website</a></h1>
diff --git a/sticky-navigation/script.js b/sticky-navigation/script.js
index f7d2bd9..7f9c1d8 100644
--- a/sticky-navigation/script.js
+++ b/sticky-navigation/script.js
@@ -7,4 +7,21 @@ function fixNav() {
     } else {
         nav.classList.remove('active')
     }
-}
\ No newline at end of file
+}
+
+var mouse = document.querySelector('#mousefollower');
+
+document.body.addEventListener('mousemove',(details)=>{
+    var x = details.pageX;
+    var y = details.pageY;
+    console.log(y)
+    mouse.style.transform = `translate(${x}px,${y}px)`
+})
+
+document.body.addEventListener('mouseenter',(details)=>{
+    mouse.style.opacity = '1'
+})
+
+document.body.addEventListener('mouseleave',(details)=>{
+    mouse.style.opacity = '0'
+})
\ No newline at end of file
diff --git a/sticky-navigation/style.css b/sticky-navigation/style.css
index 3fffd64..ec3f3e8 100644
--- a/sticky-navigation/style.css
+++ b/sticky-navigation/style.css
@@ -115,3 +115,15 @@ body {
   line-height: 30px;
   letter-spacing: 1.2px;
 }
+
+#mousefollower{
+  height: 20px;
+  width: 20px;
+  position: absolute;
+  z-index: 999;
+  mix-blend-mode: difference;
+  border-radius: 50%;
+  opacity: 0;
+  transition: 0.1s;
+  background-color: white;
+}
\ No newline at end of file
