recodehive · sanjay-kv · Oct 14, 2024 · Oct 13, 2024
diff --git a/tail_effect/index.html b/tail_effect/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tail Effect Example</title>
+    <link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->
+    <style>
+        /* Basic styles for the tail effect */
+        body {
+            margin: 0;
+            height: 100vh;
+            overflow: hidden; /* Prevent scrollbars */
+            background-color: #f0f0f0; /* Light background for visibility */
+        }
+
+        .tail-effect {
+            position: absolute;
+            width: 20px; /* Width of the tail effect */
+            height: 20px; /* Height of the tail effect */
+            border-radius: 50%; /* Make it circular */
+            background-color: rgba(255, 0, 0, 0.7); /* Semi-transparent red color */
+            pointer-events: none; /* Prevent interaction with the tail effect */
+            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transition */
+        }
+    </style>
+</head>
+<body>
+    <div class="tail-effect"></div> <!-- The tail effect element -->
+
+    <h1>Hover Over the Page!</h1>
+    <p>Move your mouse around to see the tail effect in action.</p>
+
+    <script src="script.js"></script> <!-- Link to your JavaScript file -->
+</body>
+</html>
diff --git a/tail_effect/script.js b/tail_effect/script.js
@@ -0,0 +1,92 @@
+// Get the tail effect element and the page container
+const tailEffectElement = document.querySelector('.tail-effect');
+const pageContainer = document.body;
+
+// Set the tail effect delay and easing function
+const tailEffectDelay = 0.2;
+const easingFunction = 'cubic-bezier(0.4, 0, 0.2, 1)';
+
+// Add event listeners to track cursor movement
+pageContainer.addEventListener('mousemove', (event) => {
+  const x = event.clientX;
+  const y = event.clientY;
+
+  // Update the tail effect element's position with a delay
+  requestAnimationFrame(() => {
+    tailEffectElement.style.transform = `translate(${x}px, ${y}px)`;
+    tailEffectElement.style.transition = `transform ${tailEffectDelay}s ${easingFunction}`;
+  });
+});
+
+// Add event listeners to track cursor movement outside of navigation links
+pageContainer.addEventListener('mouseleave', () => {
+  tailEffectElement.style.transform = 'translate(0, 0)';
+});
+
+// Create a smooth trailing motion using a delay and easing function
+let lastMouseX = 0;
+let lastMouseY = 0;
+let mouseX = 0;
+let mouseY = 0;
+
+function updateTailEffect() {
+  mouseX += (lastMouseX - mouseX) * 0.1;
+  mouseY += (lastMouseY - mouseY) * 0.1;
+
+  tailEffectElement.style.transform = `translate(${mouseX}px, ${mouseY}px)`;
+
+  requestAnimationFrame(updateTailEffect);
+}
+
+updateTailEffect();
+
+// Handle multiple tail effect elements (optional)
+const tailEffectElements = document.querySelectorAll('.tail-effect');
+
+tailEffectElements.forEach((element) => {
+  element.addEventListener('mousemove', (event) => {
+    const x = event.clientX;
+    const y = event.clientY;
+
+    requestAnimationFrame(() => {
+      element.style.transform = `translate(${x}px, ${y}px)`;
+      element.style.transition = `transform ${tailEffectDelay}s ${easingFunction}`;
+    });
+  });
+});
+
+// Create a more complex animation path (optional)
+function createAnimationPath() {
+  const animationPath = [];
+  const numPoints = 10;
+
+  for (let i = 0; i < numPoints; i++) {
+    const x = Math.random() * window.innerWidth;
+    const y = Math.random() * window.innerHeight;
+    animationPath.push({ x, y });
+  }
+
+  return animationPath;
+}
+
+const animationPath = createAnimationPath();
+
+let animationIndex = 0;
+
+function updateAnimation() {
+  const point = animationPath[animationIndex];
+  tailEffectElement.style.transform = `translate(${point.x}px, ${point.y}px)`;
+
+  animationIndex = (animationIndex + 1) % animationPath.length;
+
+  requestAnimationFrame(updateAnimation);
+}
+
+// Update the last mouse position on mouse move
+pageContainer.addEventListener('mousemove', (event) => {
+  lastMouseX = event.clientX;
+  lastMouseY = event.clientY;
+});
+
+// Start the animation
+updateAnimation();
diff --git a/tail_effect/styles.css b/tail_effect/styles.css
@@ -0,0 +1,16 @@
+:root {
+    --tail-effect-size: 10px;
+    --tail-effect-color: #333;
+    --tail-effect-delay: 0.2s;
+  }
+
+  .tail-effect {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--tail-effect-size);
+    height: var(--tail-effect-size);
+    background-color: var(--tail-effect-color);
+    border-radius: 50%;
+    pointer-events: none;
+  }