var i = 1;
const title = document.getElementById("display-heading");
var texts = [
"Karibu",
"Bienvenido",
"স্বাগতম।",
"Willkommen",
"أهلا بك",
"Bienvenue"
];
title.textContent = texts[0];
var loop = setInterval(function() {
title.textContent = texts[i];
i = (i+1) % texts.length; // Allows the array to loop
}, 1000);
How would I add a fade in/slow down the transition?
There is a little discrepancy between the CSS and the HTML: the HTML has an id attribute with name "display-heading", while the CSS defines attributes for a class with that name.
You can get the fading going by changing the opacity.
Here is a runnable snippet:
const title = document.getElementById("display-heading");
var texts = [
"Karibu",
"Bienvenido",
"স্বাগতম।",
"Willkommen",
"أهلا بك",
"Bienvenue"
];
title.addEventListener("transitionend", loop);
function loop() {
if (title.style.opacity != "1") {
texts.push(title.textContent = texts.shift());
title.style.opacity = 1;
} else {
setTimeout(() => title.style.opacity = 0, 500);
}
}
setTimeout(loop);#display-heading{
font-size: 30px;
transition: 0.5s opacity;
opacity: 0;
}<h1 id='display-heading'>Welcome</h1>