JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="wordRoll">
<span class="nameRoll_text">Are you</span>
<span class="nameRoll">a Broker?</span>
</div>
<div class="wordRoll">
<span class="nameRoll_text">Are you</span>
<span class="nameRoll">a Broker?</span>
</div>
<div class="wordRoll">
<span class="nameRoll_text">Are you</span>
<span class="nameRoll">a Broker?</span>
</div>

CSS

body {background-color:black;}

.nameRoll, .nameRoll2, .nameRoll_text {color:#ffffff; font-size: clamp(2rem, 8vw - 2rem, 3rem);font-weight:normal;display:block;text-align:center;}

.nameRoll {opacity:0;
  -webkit-animation: glow 3s linear;
  -moz-animation: glow 3s linear;
  animation: glow 3s linear;
}
.nameRoll2 {opacity:0;
  -webkit-animation: glow2 3s linear;
  -moz-animation: glow2 3s linear;
  animation: glow2 3s linear;
}


@-webkit-keyframes glow {
0% {opacity:0;}
20% {opacity:1;}
80% {opacity:1;}
100% {opacity:0;}

}

@-webkit-keyframes glow2 {
0% {opacity:0;}
20% {opacity:1;}
80% {opacity:1;}
100% {opacity:0;}

}

JavaScript

var x = 0;
const names = ["a Broker?", "an Accountant?", "a Solicitor?", "an Estate Agent?"];
var roll = document.getElementsByClassName("wordRoll");

function nameRoll(x) {
if (x >=  (names.length - 1)) {x = 0;} else {x = (x + 1);}
for (let i = 0; i < roll.length; i++) {
roll[i].children[1].innerHTML = names[x];
if (roll[i].children[1].className == "nameRoll" )
{roll[i].children[1].className = "nameRoll2";}
else {roll[i].children[1].className = "nameRoll";}
}

setTimeout(function() {nameRoll(x)}, 3000);
}

setTimeout(function() {nameRoll(x)}, 3000);