Marquee Example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

by MegaScience

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee -->
<marquee id="outer" direction="down" behavior="alternate"><marquee id="inner" behavior="alternate">This text will bounce</marquee></marquee>

CSS

html,
body {
  box-sizing: border-box;
  height: 100vh;
}

body {
  overflow: hidden;
  margin: 0;
  text-align: center;
}

marquee#outer {
  display: block;
  height: 100%;
  width: 100%;
  table-layout: fixed;
  border: solid;
  box-sizing: border-box;
  max-height: 100vh;
  margin: 0;
}

JavaScript

(() => {
	const mod = (x, n) => (x % n + n) % n
  const colors = ['rgb(128, 0, 0)', 'rgb(255, 0, 0)', 'rgb(255, 165, 0)', 'rgb(128, 128, 0)', 'rgb(255, 255, 0)', 'rgb(154, 205, 50)', 'rgb(0, 128, 0)', 'rgb(0, 255, 0)', 'rgb(0, 128, 128)', 'rgb(0, 255, 255)', 'rgb(0, 0, 128)', 'rgb(0, 0, 255)', 'rgb(128, 0, 128)', 'rgb(255, 0, 255)']
  const length = colors.length
  let index = -1

  const changeColors = () => {
    index = mod(++index, length)
    outer.style.color = colors[index]
    outer.style.backgroundColor = colors[length - index - 1]
  }

  outer.addEventListener('bounce', changeColors)
  inner.addEventListener('bounce', changeColors)
})()