const outputElement = document.getElementById('output');
const textArray = ['First text message.', 'Second text message.', 'Third text message.'];
let currentIndex = 0;
function displayNextText() {
if (currentIndex < textArray.length) {
// Replace the entire content with the current text
outputElement.innerHTML = textArray[currentIndex];
currentIndex++;
// Schedule the next text to be displayed after a delay (e.g., 2 seconds)
setTimeout(displayNextText, 2000); // 2000 milliseconds = 2 seconds
}
}
// Start the display sequence
displayNextText();
===============================
Text Sequentially with CSS
<div class="text-container">
<div class="text-item">First Text</div>
<div class="text-item">Second Text</div>
<div class="text-item">Third Text</div>
</div>
.text-container {
display: grid;
grid-template-areas: "content";
}
.text-item {
grid-area: content;
opacity: 0;
animation: slideIn 6s infinite;
}
/* Stagger animation with delays */
.text-item:nth-child(1) { animation-delay: 0s; }
.text-item:nth-child(2) { animation-delay: 2s; }
.text-item:nth-child(3) { animation-delay: 4s; }
@keyframes slideIn {
0% { opacity: 0; }
10% { opacity: 1; }
30% { opacity: 1; }
40% { opacity: 0; }
100% { opacity: 0; }
}
