From 260fff855d2cb885a0a25843c9974bfb37e24210 Mon Sep 17 00:00:00 2001 From: snehas-05 Date: Sun, 13 Oct 2024 10:53:59 +0000 Subject: [PATCH] commit changes --- tail_effect/index.html | 36 +++++++++++++++++ tail_effect/script.js | 92 ++++++++++++++++++++++++++++++++++++++++++ tail_effect/styles.css | 16 ++++++++ 3 files changed, 144 insertions(+) create mode 100644 tail_effect/index.html create mode 100644 tail_effect/script.js create mode 100644 tail_effect/styles.css diff --git a/tail_effect/index.html b/tail_effect/index.html new file mode 100644 index 000000000..413ec5b53 --- /dev/null +++ b/tail_effect/index.html @@ -0,0 +1,36 @@ + + + + + + Tail Effect Example + + + + +
+ +

Hover Over the Page!

+

Move your mouse around to see the tail effect in action.

+ + + + \ No newline at end of file diff --git a/tail_effect/script.js b/tail_effect/script.js new file mode 100644 index 000000000..9f2e475c3 --- /dev/null +++ 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(); \ No newline at end of file diff --git a/tail_effect/styles.css b/tail_effect/styles.css new file mode 100644 index 000000000..ff3a3771c --- /dev/null +++ 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; + } \ No newline at end of file