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 deleted file mode 100644 index 9f2e475c3..000000000 --- a/tail_effect/script.js +++ /dev/null @@ -1,92 +0,0 @@ -// 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 deleted file mode 100644 index ff3a3771c..000000000 --- a/tail_effect/styles.css +++ /dev/null @@ -1,16 +0,0 @@ -: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