Marquee

Just because.

by Lee Mulvey

HTML

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

CSS

.marquee {
    background: #eee;
    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);
});

setInterval(move, 50);

function move() {
  marquees
  .forEach((marquee) => {
  marquee.style.marginLeft = `-${marquee.i}px`;;
  marquee.i = marquee.i < marquee.width ? marquee.i + marquee.step : 1;
  }); 
}
// Modified from StackOverflow answer by Stano:
// https://stackoverflow.com/questions/337330/javascript-marquee-to-replace-marquee-tags