Skip to content

Commit 260fff8

Browse files
snehas-05snehas-05
committed
commit changes
1 parent 55c3408 commit 260fff8

File tree

3 files changed

+144
-0
lines changed

3 files changed

+144
-0
lines changed

‎tail_effect/index.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Tail Effect Example</title>
7+
<link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->
8+
<style>
9+
/* Basic styles for the tail effect */
10+
body {
11+
margin: 0;
12+
height: 100vh;
13+
overflow: hidden; /* Prevent scrollbars */
14+
background-color: #f0f0f0; /* Light background for visibility */
15+
}
16+
17+
.tail-effect {
18+
position: absolute;
19+
width: 20px; /* Width of the tail effect */
20+
height: 20px; /* Height of the tail effect */
21+
border-radius: 50%; /* Make it circular */
22+
background-color: rgba(255, 0, 0, 0.7); /* Semi-transparent red color */
23+
pointer-events: none; /* Prevent interaction with the tail effect */
24+
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transition */
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
<div class="tail-effect"></div> <!-- The tail effect element -->
30+
31+
<h1>Hover Over the Page!</h1>
32+
<p>Move your mouse around to see the tail effect in action.</p>
33+
34+
<script src="script.js"></script> <!-- Link to your JavaScript file -->
35+
</body>
36+
</html>

‎tail_effect/script.js

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
// Get the tail effect element and the page container
2+
const tailEffectElement = document.querySelector('.tail-effect');
3+
const pageContainer = document.body;
4+
5+
// Set the tail effect delay and easing function
6+
const tailEffectDelay = 0.2;
7+
const easingFunction = 'cubic-bezier(0.4, 0, 0.2, 1)';
8+
9+
// Add event listeners to track cursor movement
10+
pageContainer.addEventListener('mousemove', (event) => {
11+
const x = event.clientX;
12+
const y = event.clientY;
13+
14+
// Update the tail effect element's position with a delay
15+
requestAnimationFrame(() => {
16+
tailEffectElement.style.transform = `translate(${x}px, ${y}px)`;
17+
tailEffectElement.style.transition = `transform ${tailEffectDelay}s ${easingFunction}`;
18+
});
19+
});
20+
21+
// Add event listeners to track cursor movement outside of navigation links
22+
pageContainer.addEventListener('mouseleave', () => {
23+
tailEffectElement.style.transform = 'translate(0, 0)';
24+
});
25+
26+
// Create a smooth trailing motion using a delay and easing function
27+
let lastMouseX = 0;
28+
let lastMouseY = 0;
29+
let mouseX = 0;
30+
let mouseY = 0;
31+
32+
function updateTailEffect() {
33+
mouseX += (lastMouseX - mouseX) * 0.1;
34+
mouseY += (lastMouseY - mouseY) * 0.1;
35+
36+
tailEffectElement.style.transform = `translate(${mouseX}px, ${mouseY}px)`;
37+
38+
requestAnimationFrame(updateTailEffect);
39+
}
40+
41+
updateTailEffect();
42+
43+
// Handle multiple tail effect elements (optional)
44+
const tailEffectElements = document.querySelectorAll('.tail-effect');
45+
46+
tailEffectElements.forEach((element) => {
47+
element.addEventListener('mousemove', (event) => {
48+
const x = event.clientX;
49+
const y = event.clientY;
50+
51+
requestAnimationFrame(() => {
52+
element.style.transform = `translate(${x}px, ${y}px)`;
53+
element.style.transition = `transform ${tailEffectDelay}s ${easingFunction}`;
54+
});
55+
});
56+
});
57+
58+
// Create a more complex animation path (optional)
59+
function createAnimationPath() {
60+
const animationPath = [];
61+
const numPoints = 10;
62+
63+
for (let i = 0; i < numPoints; i++) {
64+
const x = Math.random() * window.innerWidth;
65+
const y = Math.random() * window.innerHeight;
66+
animationPath.push({ x, y });
67+
}
68+
69+
return animationPath;
70+
}
71+
72+
const animationPath = createAnimationPath();
73+
74+
let animationIndex = 0;
75+
76+
function updateAnimation() {
77+
const point = animationPath[animationIndex];
78+
tailEffectElement.style.transform = `translate(${point.x}px, ${point.y}px)`;
79+
80+
animationIndex = (animationIndex + 1) % animationPath.length;
81+
82+
requestAnimationFrame(updateAnimation);
83+
}
84+
85+
// Update the last mouse position on mouse move
86+
pageContainer.addEventListener('mousemove', (event) => {
87+
lastMouseX = event.clientX;
88+
lastMouseY = event.clientY;
89+
});
90+
91+
// Start the animation
92+
updateAnimation();

‎tail_effect/styles.css

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
:root {
2+
--tail-effect-size: 10px;
3+
--tail-effect-color: #333;
4+
--tail-effect-delay: 0.2s;
5+
}
6+
7+
.tail-effect {
8+
position: absolute;
9+
top: 0;
10+
left: 0;
11+
width: var(--tail-effect-size);
12+
height: var(--tail-effect-size);
13+
background-color: var(--tail-effect-color);
14+
border-radius: 50%;
15+
pointer-events: none;
16+
}

0 commit comments

Comments
 (0)