From 67670dc2f312d47e5bdbf0240d39a7a63372becf Mon Sep 17 00:00:00 2001
From: #Priyanshi24 <priyanshi.bhargava2022@glbajajgroup.org>
Date: Thu, 10 Oct 2024 22:22:14 +0530
Subject: [PATCH] Added Mouse Cursor Trail Effect

---
 index.html | 32 ++++++++++++++++++++++++++++++++
 script.js  | 36 ++++++++++++++++++++++++++++++++++++
 style.css  | 19 +++++++++++++++++++
 3 files changed, 87 insertions(+)

diff --git a/index.html b/index.html
index deef6d50..6f19cc51 100644
--- a/index.html
+++ b/index.html
@@ -514,6 +514,38 @@ <h2>Contact Us</h2>
     <div class="scroll-top" onclick="scrollToTop()">
         <ion-icon name="arrow-up-outline"></ion-icon>
     </div>
+    <div class="circle-container">
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+      </div>
 
     <!-- this script is for twitter icon  starts -->
  <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
diff --git a/script.js b/script.js
index 692f1349..804d6860 100644
--- a/script.js
+++ b/script.js
@@ -82,3 +82,39 @@ function performSearch(){
         }
     });
 }
+document.addEventListener("DOMContentLoaded", function () {
+    const coords = { x: 0, y: 0 };
+    const circles = document.querySelectorAll(".circle");
+  
+    circles.forEach(function (circle) {
+      circle.x = 0;
+      circle.y = 0;
+    });
+  
+    window.addEventListener("mousemove", function (e) {
+      coords.x = e.pageX;
+      coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
+    });
+  
+    function animateCircles() {
+      let x = coords.x;
+      let y = coords.y;
+  
+      circles.forEach(function (circle, index) {
+        circle.style.left = `${x - 12}px`;
+        circle.style.top = `${y - 12}px`;
+        circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
+  
+        const nextCircle = circles[index + 1] || circles[0];
+        circle.x = x;
+        circle.y = y;
+  
+        x += (nextCircle.x - x) * 0.3;
+        y += (nextCircle.y - y) * 0.3;
+      });
+  
+      requestAnimationFrame(animateCircles);
+    }
+  
+    animateCircles();
+  });
diff --git a/style.css b/style.css
index 58aedfd6..4f9b4ca3 100644
--- a/style.css
+++ b/style.css
@@ -1193,4 +1193,23 @@ button:hover img {
     color: #555;
     line-height: 1.5; /* Slightly tighter line height */
   }
+  /* mouse cursor trail effect */
+.circle {
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    pointer-events: none;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(220, 20, 60, 0.7));;
+    transition: transform 0.1s, left 0.1s, top 0.1s;
+  }
+  .circle-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 9999;
+  }
   
\ No newline at end of file