Hello friend, hope you are doing awesome. Today in this blog you will learn to create Multiple Typing Text Animation using HTML CSS and JavaScript. I also have created a Website with Typing Text Effect.
Multiple typing text animation means the animation of the text that changes automatically like the typewriter effect. This typing text effect is going very famous nowadays. We can see this type of effect on website manly.
Let’s have a quick look at the given image of our project [Multiple Typing Text Animation]. In the image, we can see white text and blue text with the incomplete word. Actually, the with parts of the text will be constant and the blue part words will be animated with multiple texts.
To see the real demo of this multiple typing text animation and the HTML CSS and JavaScript code that I have used to create this project, you can watch the video tutorial of this project, which is given below.
Multiple Typing Text Animation using HTML CSS & JavaScript
I have provided all the HTML CSS and JavaScript code that I have used to create this multiple typing text animation. Before jumping into the source code files, you need to know some basic explanations of this given video tutorial.
As you have seen in the video tutorial on the multiple typing text animation using HTML CSS and JavaScript. On the screen, we have seen two types of text one is white-colored with constant features and another is blue-colored with an animated feature. Also, we have seen the blues portion text animated automatically with different text like a typewriter effect. To animate this text like a typewriter I have used CSS animation property and to change the text I have used some JavaScript.
I hope, now you can create this type of project [Multiple Typing Text Animation] easily, if you are feeling difficulty creating, I have provided all the source code below.
You Might Like This:
Multiple Typing Text [Source Code]
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!----======== CSS ======== -->
<link rel="stylesheet" href="style.css">
<!--<title>Typing Text Animation</title>-->
</head>
<body>
<div class="container">
<span class="text first-text">I'm a</span>
<span class="text sec-text">Freelancer</span>
</div>
<script>
const text = document.querySelector(".sec-text");
const textLoad = () => {
setTimeout(() => {
text.textContent = "Freelancer";
}, 0);
setTimeout(() => {
text.textContent = "Blogger";
}, 4000);
setTimeout(() => {
text.textContent = "YouTuber";
}, 8000); //1s = 1000 milliseconds
}
textLoad();
setInterval(textLoad, 12000);
</script>
</body>
</html>
/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #010718;
overflow: hidden;
}
.container{
width: 246px;
overflow: hidden;
}
.container .text{
position: relative;
color: #4070F4;
font-size: 30px;
font-weight: 600;
}
.container .text.first-text{
color: #FFF;
}
.text.sec-text:before{
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #010718;
border-left: 2px solid #4070F4;
animation: animate 4s steps(12) infinite;
}
@keyframes animate{
40%, 60%{
left: calc(100% + 4px);
}
100%{
left: 0%;
}
}
