Merge pull request #588 from Jasleen1210/issue-#579

Added trail cursor on login page
sk66641 · Aug 5, 2024 · e6622a3 · e6622a3
2 parents 1192892 + a355803
commit e6622a3
Showing 1 changed file with 116 additions and 0 deletions.
diff --git a/Login/index1.html b/Login/index1.html
@@ -15,6 +15,49 @@
     <link rel="stylesheet" href="./styles1.css">
     <link rel="stylesheet" href="../css/backToTopButton.css">
     <title>Login/SignUp Page</title>
+    <style>
+      .circle {
+          position: absolute;
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          pointer-events: none;
+          background: radial-gradient(circle, rgba(73, 232, 247, 0.466), rgba(141, 38, 172, 0.5));
+          transition: transform 0.1s, left 0.1s, top 0.1s;
+          box-shadow: 0 0 20px #23bdf5,
+            0 0 60px #f523f5,
+            0 0 100px #23bdf5;
+            animation: colors 1s infinite;
+      transform: translate(-50%, -50%);
+        }
+
+        .circle-container {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          z-index: 9999;
+        }
+
+        @media (max-width: 724px) {
+    .circle-container{
+      display: none;
+    }
+  }
+        @keyframes colors {
+      0% {
+        filter: hue-rotate(0deg);
+      }
+
+      100% {
+        filter: hue-rotate(360deg);
+      }
+
+    }
+
+  </style>
     <style>
         .backbtn {
             position: absolute;
@@ -24,6 +67,39 @@
         }
     </style>
 </head>
+<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>
+
 <body style="background-color: black;">
     <a href="../index.html" class="backbtn">
         <img src="../assets/images/Designer.jpeg" alt="Home" style="width: 70px; height: 70px;">
@@ -131,5 +207,45 @@ <h1 style="color: yellow;">Hey there, Friend!</h1>
     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
     <script src="../js/background.js"></script>
     <script src="./script1.js"></script>
+    <script>
+      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.25;
+            y += (nextCircle.y - y) * 0.25;
+          });
+
+          requestAnimationFrame(animateCircles);
+        }
+
+        animateCircles();
+      });
+    </script>
+
 </body>
+
 </html>