Merge pull request #363 from MastanSayyad/main

Added New "Cursor-Trail Effect" to The Website
Akshatchaube01 · Jul 7, 2024 · 6f65dd2 · 6f65dd2
2 parents f4b7f6c + c96e1a0
commit 6f65dd2
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -27,13 +27,68 @@
       type="text/javascript"
       src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
     ></script>
+
+    <style>
+         .circle {
+        position: absolute;
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        pointer-events: none;
+        background: radial-gradient(circle, #00eaff, #0378ff);
+        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;
+      }
+    </style>
 
     </head>
     <body>
         <div id="root"></div>
         <script type="module" src="/src/main.jsx"></script>
           <p id="location"></p>  
+
+          <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>
+    <script src="trail.js"></script>
     </body>
 
 

diff --git a/src/main.css b/src/main.css
@@ -25,6 +25,7 @@
 body {
   background-color: var(--bg-color);
   color: var(--text-color);
+  cursor: none;
 }
 
 .navbar {

diff --git a/src/main.jsx b/src/main.jsx
@@ -2,7 +2,6 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Home from "./components/Home";
-import AnimatedCursor from "react-animated-cursor";
 import AboutUs from "./components/AboutUs";
 import DemoSection from "./components/DemoSection";
 import ContactUs from "./components/ContactUs";
@@ -19,27 +18,7 @@ import App from './App.jsx';
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <Router>
-    <AnimatedCursor 
-        innerSize={8}
-        outerSize={30}
-        color="0,0,280"
-        outerAlpha={.6}
-        innerScale={1.1}
-        outerScale={5}
-        clickables={[
-          'a',
-          'input[type="text"]',
-          'input[type="email"]',
-          'input[type="number"]',
-          'input[type="submit"]',
-          'input[type="image"]',
-          'label[for]',
-          'select',
-          'textarea',
-          'button',
-          '.link'
-        ]}
-      />
+
     <Preloader />
     <Navbar />{" "}
     {/* Place Navbar outside of Routes to ensure it's always visible */}

diff --git a/trail.js b/trail.js
@@ -0,0 +1,34 @@
+const coords = { x: 0, y: 0 };
+const circles = document.querySelectorAll(".circle");
+
+circles.forEach(function (circle, index) {
+  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})`;
+
+    circle.x = x;
+    circle.y = y;
+
+    const nextCircle = circles[index + 1] || circles[0];
+    x += (nextCircle.x - x) * 0.3;
+    y += (nextCircle.y - y) * 0.3;
+  });
+
+  requestAnimationFrame(animateCircles);
+}
+
+animateCircles();