const hero = document.getElementById('hero');
// Show on scroll into view
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
hero.classList.add('visible');
hero.classList.remove('out');
} else {
hero.classList.remove('visible');
hero.classList.add('out');
}
},
{ threshold: 0.25 }
);
observer.observe(hero);
circle.addEventListener("mouseleave", () => {
animateCircle(circle);
});
}
function animateCircle(circle) {
const moveCircle = () => {
const duration = Math.random() * 15 + 10; // Random duration between 5-10 seconds
const newTop = Math.random() * 100;
const newLeft = Math.random() * 100;
circle.animate(
[
{ top: circle.style.top, left: circle.style.left },
{ top: `${newTop}%`, left: `${newLeft}%` },
],
{
duration: duration * 1000,
easing: "ease-in-out",
fill: "forwards",
iterations: 1,
}
).onfinish = () => {
// Update circle position
circle.style.top = `${newTop}%`;
circle.style.left = `${newLeft}%`;
moveCircle(); // Repeat the animation
};
};
// Initial animation
moveCircle();
}
function joltCircle(circle) {
// Calculate a new random position within the inner box
const newTop = Math.random() * 100;
const newLeft = Math.random() * 100;
// Animate the circle to the new position very quickly (jolt effect)
circle.animate(
[
{ top: circle.style.top, left: circle.style.left },
{ top: `${newTop}%`, left: `${newLeft}%` },
],
{
duration: 10, // Fast movement to create a jolt effect (in milliseconds)
easing: "linear",
fill: "forwards",
iterations: 1,
}
).onfinish = () => {
// Update circle position after jolt
circle.style.top = `${newTop}%`;
circle.style.left = `${newLeft}%`;
};
}
});
