JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<p>this is an <span data-words="awesome,amazing,average,interesting,unholy" data-interval="5">unmoving</span> sentence</p>

<p>this is another <span data-words="brave,bold,big,bananas" data-interval="1">initial</span> sentence</p>

JavaScript

class Scroller {
	constructor() {
  	this.scrollers = Array.from(document.querySelectorAll("[data-words]")).map(el => {
    	const interval = parseInt(el.dataset.interval || 5) * 1000;
    	const words = el.dataset.words.split(",");
      let index = 0;
      el.innerText = words[0];
      return {
        words,
        interval,
        index,
        intervalId: window.setInterval(() => {el.innerText = words[++index % words.length]}, interval),
      }
    });
  }
}

new Scroller()