.marquee-footer { white-space: nowrap; overflow: hidden; position: relative; font-size: 360px; text-transform: uppercase; font-family: 'humane' !important; color: #101010; letter-spacing: -1px; line-height: 0em; width: 100%; box-sizing: border-box; display: flex; align-items: center; padding: 0; margin: 0; height: 1em; } .marquee-footer-wrapper { display: inline-block; white-space: nowrap; will-change: transform; } .marquee-footer-content { display: inline-block; } @media (max-width: 768px) { .marquee-footer { font-size: 200px; letter-spacing: 0px; font-family: 'humane'!important; } } @media (max-width: 480px) { .marquee-footer { font-size: 120px; letter-spacing: 0px; font-family: 'humane' !important; } } document.addEventListener("DOMContentLoaded", function() { const wrapper = document.getElementById('marquee-footer-wrapper'); const content = document.getElementById('marquee-footer-content'); let lastScrollY = window.scrollY; let speed = 1; let position = 0; let backRollEffect = 0; // Duplicate content to ensure continuous scroll wrapper.innerHTML = content.innerHTML.repeat(4); function animate() { const currentScrollY = window.scrollY; const scrollDelta = currentScrollY - lastScrollY; lastScrollY = currentScrollY; // Adjust speed based on scroll if (scrollDelta > 0) { speed = Math.min(speed + 0.1, 2); // Increase speed, max 5 backRollEffect = 0; // Reset back-roll effect } else if (scrollDelta < 0) { speed = Math.max(speed - 0.2, 1); // Decrease speed, min 0.2 backRollEffect = Math.min(backRollEffect + 0.5, 2); // Increase back-roll effect } else { speed = Math.max(speed - 0.1, 1); // Gradually return to normal speed backRollEffect = Math.max(backRollEffect - 0.1, 0); // Decrease back-roll effect } position += speed - backRollEffect; const wrapperWidth = wrapper.offsetWidth / 4; if (position >= wrapperWidth) { position = position % wrapperWidth; } if (position < 0) { position = wrapperWidth + position; } wrapper.style.transform = `translateX(${-position}px)`; requestAnimationFrame(animate); } animate(); });