From 7a24cb30e6ea4ce92ba9b0b74e62c3be05940a46 Mon Sep 17 00:00:00 2001
From: akash70629 <akash70629@gmail.com>
Date: Sat, 9 Nov 2024 15:53:46 +0530
Subject: [PATCH] animation added

---
 fcdoTravel.html | 86 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)
diff --git a/fcdoTravel.html b/fcdoTravel.html
index db89870..f4b41c7 100644
--- a/fcdoTravel.html
+++ b/fcdoTravel.html
@@ -7,6 +7,20 @@
     <title>FCDO Travel Advice</title>
     <style>
         /* CSS Styling */
+
+
+        .circle {
+    height: 24px;
+    width: 24px;
+    border-radius: 24px;
+    background-color: black; 
+    position: fixed; 
+    top: 0;
+    left: 0;
+    pointer-events: none; 
+    z-index: 99999999; 
+}
+
 body {
     font-family: Arial, sans-serif;
     margin: 0;
@@ -126,6 +140,32 @@
 <body>
 
     <header>
+
+  <!-- cursor -->
+  <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>
+  <!-- cursor ends -->
+
+
         <nav class="navbar">
               <img src="https://ticket-booking-blue.vercel.app/images/4.jpeg" alt="" style="border-radius: 50%; height: 35px; width: 35px;">
               <div class="logo" style="margin-right: 200px; font-size: 20px;">Ticket Marketplace</div>
@@ -337,6 +377,52 @@ <h4>FIND US</h4>
 }
 
 
+//cursor
+
+const coords = { x: 0, y: 0 };
+const circles = document.querySelectorAll(".circle");
+
+const colors = [
+  "#BCE954", "#98FF98", "#9CB071", "#90C209", "#B2C248", 
+  "#85BB65", "#99C68E", "#6CBB3C", "#3ea055", "#41a317", 
+  "#4AA02C", "#6AA121", "#347C2C", "#387C44", "#437C17", 
+  "#306754", "#254117", "#667C26", "#728C00", "#008000"
+];
+
+circles.forEach(function (circle, index) {
+  circle.x = 0;
+  circle.y = 0;
+  circle.style.backgroundColor = colors[index % colors.length];
+});
+
+window.addEventListener("mousemove", function(e){
+  coords.x = e.clientX;
+  coords.y = e.clientY;
+});
+
+function animateCircles() {
+  let x = coords.x;
+  let y = coords.y;
+
+  circles.forEach(function (circle, index) {
+    circle.style.left = x - 12 + "px"; // Center the circle on the mouse
+    circle.style.top = y - 12 + "px";  // Center the circle on the mouse
+
+    circle.style.transform = `scale(${(circles.length - index) / circles.length})`; // Correct scale setting
+
+    circle.x = x;
+    circle.y = y;
+
+    const nextCircle = circles[index + 1] || circles[0];
+    x += (nextCircle.x - x) * 0.3;
+    y += (nextCircle.y - y) * 0.6;
+  });
+
+  requestAnimationFrame(animateCircles);
+}
+
+animateCircles();
+
 </script>
 </body>
 </html>
