jQuery Marquee

I shopped around for a plugin but couldn't find what i was looking for so i knocked one up. welcome to the year 2000

by Ciprian Popescu

HTML

<div class="marquee">
  <span>One</span>
  <span>Two</span>
  <span>Three</span>
  <span>Four</span>
  <span>Five</span>
  <span>Six</span>
  <span>Seven</span>
  <span>Eight</span>
  <span>Nine</span>
  <span>Ten</span>
  <span>Eleven</span>
  <span>Twelve</span>
  <span>Thirteen</span>
  <span>Fourteen</span>
  <span>Fifteen</span>
  <span>Sixteen</span>
  <span>Seventeen</span>
  <span>Eighteen</span>
  <span>Nineteen</span>
  <span>Twenty</span>

</div>

CSS

.marquee span{
    position: absolute;
}

JavaScript

const off = 10;
let l = off;
const marqueeElements = Array.from(document.querySelectorAll('.marquee span'));
const speed = 2;
const stack = [];
let pause = false;

marqueeElements.forEach(element => {
    const width = element.offsetWidth + off;
    element.style.left = `${l}px`;
    l += width;
    stack.push(element);
});

function moveMarquee() {
    if (!pause) {
        marqueeElements.forEach(element => {
            const currentLeft = parseFloat(getComputedStyle(element).left);
            const newLeft = currentLeft - speed;
            element.style.left = `${newLeft}px`;

            if (newLeft + element.offsetWidth < -130) {
                const firstElement = stack.shift();
                const lastElement = stack[stack.length - 1];
                element.style.left = `${parseFloat(getComputedStyle(lastElement).left) + lastElement.offsetWidth + off}px`;
                stack.push(element);
            }
        });
    }
    requestAnimationFrame(moveMarquee);
}

requestAnimationFrame(moveMarquee);

const marqueeContainer = document.querySelector('.marquee');
marqueeContainer.addEventListener('mouseover', () => {
    pause = true;
});
marqueeContainer.addEventListener('mouseout', () => {
    pause = false;
});