43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
const container = document.getElementById("marquee-container");
|
|
const content = document.getElementById("marquee-content");
|
|
|
|
// Calculate the total width needed for animation
|
|
let contentWidth = content.offsetWidth;
|
|
|
|
// Clone the content multiple times to ensure smooth looping
|
|
for (let i = 0; i < 3; i++) {
|
|
const clone = content.cloneNode(true);
|
|
container.appendChild(clone);
|
|
}
|
|
|
|
// Start animation
|
|
let scrollPosition = 0;
|
|
const speed = 0.5; // slower speed (was 1)
|
|
let isAnimating = true;
|
|
|
|
// Pause on hover
|
|
container.addEventListener("mouseenter", function () {
|
|
isAnimating = false;
|
|
});
|
|
|
|
container.addEventListener("mouseleave", function () {
|
|
isAnimating = true;
|
|
});
|
|
|
|
function scroll() {
|
|
if (isAnimating) {
|
|
scrollPosition -= speed;
|
|
// Reset when first element is completely scrolled out
|
|
if (scrollPosition <= -contentWidth) {
|
|
scrollPosition += contentWidth;
|
|
}
|
|
container.style.transform = `translateX(${scrollPosition}px)`;
|
|
}
|
|
requestAnimationFrame(scroll);
|
|
}
|
|
|
|
// Start the animation
|
|
scroll();
|
|
});
|