Marquee

Just because.

by Ciprian Popescu

HTML

<div class="wrapper">
    <div class="marquee">Hey there!</div>
</div>

CSS

.wrapper {
    border: 1px solid red;
    width: 100%;
    height: 40px;
    overflow: hidden;
    position: relative;
}
.marquee {
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
}

JavaScript

const marquees = [...document.querySelectorAll('.marquee')];
marquees.forEach((marquee) => {
    marquee.innerHTML = marquee.innerHTML + '&nbsp;'.repeat(5);
    marquee.i = 0;
    marquee.step = 3;
    marquee.width = marquee.clientWidth + 1;
    marquee.style.position = '';
    marquee.innerHTML = `${marquee.innerHTML}&nbsp;`.repeat(10);
    marquee.addEventListener('mouseenter', () => (marquee.step = 0), false);
    marquee.addEventListener('mouseleave', () => (marquee.step = 3), false);
});

requestAnimationFrame(move);

function move() {
    marquees.forEach((marquee) => {
        marquee.style.marginLeft = `-${marquee.i}px`;
        marquee.i = marquee.i < marquee.width ? marquee.i + marquee.step : 1;
    });

    requestAnimationFrame(move);
}