This blog teaches you how to animate text using JavaScript. This post is similar to the previous post, in that it shows a text animation where words appear one by one with a float-up animation. This blog will teach you how to make text or a string appear by displaying its characters one by one with animation using HTML, CSS, and JavaScript.
JavaScript method used:
split()
array.map()
join()
JavaScript loop used:
For loop.
Video Tutorial on Text Reveal Animation (letter by letter) Using JavaScript.
Make Text Characters Appear One by One Using JavaScript.
Here's how we can create the text animation ?:
- Obtain the Text: We'll first get the text or string from the HTML element.
- Split string into Characters: Then, we'll split the text into an array of individual characters.
- Wrap characters with Span tag: Using the map method, we'll wrap each character with a <span> tag.
- Position Span tag or characters: We'll set the initial top position of all <span> tags to 35px (creating a slide-down effect).
- Animate Span tag or you can say each character: Finally, we'll select all the <span> tags and use a for loop combined with the setTimeout method to individually change each span's top position from 35px to 0px one by one according to its index value.
This makes each character of text float up one by one (wave effect). Making the string or text looks animated.
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>Text Reveal Animation using JavaScript. | Maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="text">Hello welcome to maketechstuff.com</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: 100%;
text-align: center;
}
.box{
/* border: 2px solid #000; */
overflow: hidden;
}
.text{
color: blue;
font-size: 30px;
font-weight: bold;
}
.text span{
position: relative;
top: 35px;
transition: 0.3s cubic-bezier(0.400, -0.500, 0.500, 1.500);
}
Output:
JavaScript
let box = document.querySelector(".box");
let text = document.querySelector(".text");
// split the text into an array of characters.
// Wrap each character with span tag using array.map() method.
text.innerHTML = text.innerHTML.split("").map((letter, index) => `<span>` + letter + `</span>`).join("");
// Settimeout to delay the code execution on page load. So that first character also animate.
setTimeout(() => {
// Select all span tag that we created above with map method.
let span = document.querySelectorAll(".text span");
// Animate each span tag. Change each span tag position one by one throught settimeout method with the span tag index position.
for (let i = 0; i < span.length; i++) {
const element = span[i];
setTimeout(() => {
element.style.top = "0px";
}, 100 * i);
}
}, 200);
Output:
So that's how you can animate text that appears character by character, one by one with animation using HTML CSS and JavaScript. If you have any query or suggestion you can write in the comment section below.
You may like:
- How to blink the text using HTML CSS and JavaScript.
- How to reveal the text by displaying its words one by one using HTML, CSS and JavaScript.
- How to appear the texts with typing effect using JavaScript.
- How to display the multiple texts one by one with animation using JavaScript.
Share your thoughts.