In this blog you’ll learn how to display a multiple text automatically with typing animation using HTML, CSS and JavaScript. Different texts appears with typing effect automatically.
JavaScript method used:
split()
Array.map()
join()
settimeout()
JavaScript loops used:
For loop.
Automatic Multiple Texts Typing Animation.
Our text typing animation consists of two parts: a static element and a dynamic element. The dynamic element automatically changes the text with a typing effect (animation).
File structure:
- Create one folder.
- Open that folder in your code editor.
- Create two files in that folder named index.html and index.css.
I’ve integrated javascript inside the HTML file.
Let's create text typing animation using HTML, CSS and JavaScript.
Create basic structure for text typing animation using HTML and CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Automatic Texts typing Animation using HTML, CSS and JavaScript. | Maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="text">
<p class="static_text">Learn</p>
<p class="dynamic_text">HTML</p>
</div>
</div>
</div>
</body>
</html> CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
position: relative;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 450px;
}
.box {
background-color: blue;
padding: 16px 20px;
border-radius: 5px;
box-shadow: 0px 5px 20px -15px #000;
overflow: hidden;
}
.text {
width: fit-content;
display: flex;
align-items: center;
font-size: 40px;
color: #fff;
}
.text .static_text {
margin-right: 12px;
}
.dynamic_text {
border-right: 2px solid #fff;
}
Output:
We will change the text with a typing effect inside the HTML element with the class name "dynamic_text".
Declare the variable.
dynamic_text for selecting and displaying the inside the HTML element class name dynamic_text.
text_array for storing the different text or words to display inside the dynamic_text element one by one.
f variable to use as an index value to extract the array element to show inside the HTML element with class name dynamic_text.
JavaScript
let dynamic_text = document.querySelector(".dynamic_text");
// Creating the array to store the multiple words to display one by one with typing animation inside the HTML element with class dynamic_text.
let text_array = ["HTML", "CSS", "JavaScript", "PHP"];
// The f variable value is use as a index value to extract the item from array.
let f = 0;
Call and create the function to change the text with typing animation.
We are not going to use the setInterval method to change the text again and again. Instead of that we are going to use a for loop.
When this function runs.
We increment the f variable value by 1.
Then we add the array element inside the HTML element (dynamic_text class) according to index value (f variable value) and also with wrapping each letter of words or text or array elements by span tag.
Initially we hide the letter (span) by making font-size: 0px and opacity: 0.
CSS
span {
opacity: 0;
font-size: 0px;
transition: 0.3s;
} After that we select all the span tags. And run for loop, and make each letter (span tag) visible by increasing the font size and making opacity 1. But we make each letter visible one by one with the setTimeout method inside the for loop.
After all the letter (span tag) is visible of single text that is currently displayed according to f variable value. We run the function again after 2 seconds to change the text. And the process starts again from incrementing the f value.
And we also add one if condition to make f value to 0 if it equals to the text_array length. So that words or texts start displaying again from the first words or text.
JavaScript
// calling the function.
change_text();
// Declaring the function to change the multiple text with typing animation.
function change_text() {
// Increment the f variable value by 1.
f++;
// We store array item inside the HTML element with class dynamic_text after wrapping the each letter of item inside the span tag.
dynamic_text.innerHTML = text_array[f - 1].split("").map((letter, index) => `<span>` + letter + `</span>`).join("");
// Select all span tags (letter of current array item).
let span_array = document.querySelectorAll("span");
for (let i = 0; i < span_array.length; i++) {
const element = span_array[i];
// display all span tags (letter) of each item (word) one by one.
setTimeout(() => {
element.style.opacity = "1";
element.style.fontSize = "40px";
// if all span tags are displayed we run the function again after 2 second. So that next array element will display.
if (i === span_array.length - 1) {
setTimeout(() => {
change_text();
}, 2000);
}
}, 200 * i);
}
// Repeat the array item when all displayed.
if (f == text_array.length) {
f = 0;
}
}
Final code:
So that's how you can create the dynamic multiple text typing animation effect using HTML, CSS and JavaScript. If you have any query or suggestion you can write in the comment section.
You may like:
- How to create a simple text changing functionality with animation using JavaScript.
- How to display texts words one by one with floats up animation using JavaScript.
- How to display text or string characters one by one with float up animation (wave effect) using JavaScript.
- How to create the input field with dynaimc placeholder using HTML, CSS and JavaScript.
Share your thoughts.