From 8395da81e412e23dd8b03f6196b07c83b597e722 Mon Sep 17 00:00:00 2001
From: Nikunj <mnikunj262@gmail.com>
Date: Sun, 26 May 2024 00:19:24 +0530
Subject: [PATCH] add mouse effect js and css

---
 index.html      |  4 +++-
 mouseEffect.css | 18 ++++++++++++++++++
 mouseEffect.js  | 27 +++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 mouseEffect.css
 create mode 100644 mouseEffect.js

diff --git a/index.html b/index.html
index a841330d..1a7347cf 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,8 @@
     type="image/x-icon" />
 
   <script src="index.js" defer></script>
+  <script src="mouseEffect.js"></script>
+  <link rel="stylesheet" href="mouseEffect.css">
   <script src="Theme.js" defer></script>
 
   <link rel="stylesheet" href="path/to/aos.css">
@@ -102,7 +104,7 @@ <h1>TourGuide . . .</h1>
     <button id="toggle" data-aos="fade-down">Dark Theme</button>
     <a href="#contact"><button class="btn" id="btn-style">Contact Us</button></a>
   </nav> -->
-    <div class="nav-container">
+    <div class="nav-container" id="top">
       <nav class="newNav">
         <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
 
diff --git a/mouseEffect.css b/mouseEffect.css
new file mode 100644
index 00000000..ef52c6b6
--- /dev/null
+++ b/mouseEffect.css
@@ -0,0 +1,18 @@
+
+.ripple {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-radius: 45%;
+    background: linear-gradient(45deg, #b3e0f1, #01baef);
+    pointer-events: none;
+    transform: scale(0);
+    z-index: 1000;
+    transition: transform 1.2s, opacity 1s;
+    opacity: 1;
+}
+
+.ripple-active {
+    transform: scale(3);
+    opacity: 0;
+}
\ No newline at end of file
diff --git a/mouseEffect.js b/mouseEffect.js
new file mode 100644
index 00000000..fe3edc86
--- /dev/null
+++ b/mouseEffect.js
@@ -0,0 +1,27 @@
+document.addEventListener('mousemove', function(event) {
+    const ripple = document.createElement('div');
+    const element = document.getElementById('top');
+
+    let x = event.clientX;
+    let y = event.clientY;
+    let scrollLeft = window.pageXOffset;
+    let scrollTop = window.pageYOffset;
+    ripple.className = 'ripple';
+    let relativeX = x + scrollLeft;
+    let relativeY = y + scrollTop;
+    ripple.style.left = `${relativeX  - 5}px`;
+    ripple.style.top = `${relativeY - 5}px`;
+    
+    document.body.appendChild(ripple);
+
+
+    // Trigger the animation by adding the class after a short delay
+    setTimeout(() => {
+        ripple.classList.add('ripple-active');
+    }, 10);
+
+    // Remove the ripple element after the animation ends
+    ripple.addEventListener('transitionend', () => {
+        ripple.remove();
+    });
+});