Have you ever come across that cool text typing effect on different websites where the words appear as if they’re being typed out? If you’re a beginner web developer, you might wonder how to create such an eye-catching animation on your own. Well, it’s a simple yet impressive effect that can be achieved using just HTML, CSS, and JavaScript.
In this blog post, I’ll guide you through the steps of creating this text-typing animation using HTML, CSS, and Vanilla JavaScript. This means we don’t rely on any external JavaScript libraries like typed.js. So you’ll gain a deep understanding of how this type of typing animation is created and how you can apply your skills to real-world web projects.
In this typing animation, each letter of the word appears after the other, creating a typewriter effect. There is also a blinking caret animation at the end of the word to make the effect more attractive. To know more about what our typing text animation looks like, you can watch the given Demo.
if you like reading blog posts or want a step-by-step guide for creating this effect, you can continue reading this post. By the end of this post, you’ll have your own customizable text typing effect that you can easily use on your other projects.
Steps to Create Text Typing Animation in HTML & JavaScript (Method:- 1)
To create a custom text typing effect using HTML, CSS, and vanilla JavaScript, follow these simple step-by-step instructions:
1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
2. Create an index.html file. The file name must be index and its extension .html
3. Create a style.css file. The file name must be style and its extension .css
4. Create a script.js file. The file name must be script and its extension .js
To start, add the following HTML codes to your index.html file. This code includes essential HTML markup with <h1> and <span> tags, which we’ll use for the typing effect. Currently, the <span> element is empty, but using JavaScript, we’ll dynamically add the custom typing word.
<!DOCTYPE html>
<!-- Coding By WebCoderHub - www.webcoderhub.tk -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing Text Effect | WebCoderHub</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<h1>Coding is <span></span></h1>
</body>
</html>
Next, add the following CSS codes to your style.css file to apply visual styling to your text like color, font, border, background, etc. Now, if you load the web page in your browser, you will see styled static text with blinking caret animation.
/* Importing Google font - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background: #1D1E23;
}
h1 {
color: #fff;
font-size: 2rem;
font-weight: 600;
}
h1 span {
color: #BD53ED;
position: relative;
}
h1 span::before {
content: "";
height: 30px;
width: 2px;
position: absolute;
top: 50%;
right: -8px;
background: #BD53ED;
transform: translateY(-45%);
animation: blink 0.7s infinite;
}
h1 span.stop-blinking::before {
animation: none;
}
@keyframes blink {
50% { opacity: 0 }
}
Finally, add the following JavaScript code to your script.js file. These scripts include different JavaScript functions, variables, methods, and others that are responsible for creating the text-typing effect.
const dynamicText = document.querySelector("h1 span");
const words = ["Love", "like Art", "the Future", "Everything"];
// Variables to track the position and deletion status of the word
let wordIndex = 0;
let charIndex = 0;
let isDeleting = false;
const typeEffect = () => {
const currentWord = words[wordIndex];
const currentChar = currentWord.substring(0, charIndex);
dynamicText.textContent = currentChar;
dynamicText.classList.add("stop-blinking");
if (!isDeleting && charIndex < currentWord.length) {
// If condition is true, type the next character
charIndex++;
setTimeout(typeEffect, 200);
} else if (isDeleting && charIndex > 0) {
// If condition is true, remove the previous character
charIndex--;
setTimeout(typeEffect, 100);
} else {
// If word is deleted then switch to the next word
isDeleting = !isDeleting;
dynamicText.classList.remove("stop-blinking");
wordIndex = !isDeleting ? (wordIndex + 1) % words.length : wordIndex;
setTimeout(typeEffect, 1200);
}
}
typeEffect();
In the above code, you can see there is a “words” array that contains a list of phrases used for the typing animation, some global variables used to track typing status, and a function with an if/else condition to initiate the typing and erasing effects.
Make Text Typing Animation using only HTML & CSS (Pure css) [Method:- 2]
Pure Css Code Will help in reducing the Loading time impact in your website because in this method we are using only pure css without any JavaScript code.
1. Create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By WebCoderHub - www.webcoderhub.tk -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple Texts Typing Animation | webcoderhub</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="static-txt">I'm a</div>
<ul class="dynamic-txts">
<li><span>YouTuber</span></li>
<li><span>Designer</span></li>
<li><span>Developer</span></li>
<li><span>Freelancer</span></li>
</ul>
</div>
</body>
</html>
2. Create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #343F4F;
}
.wrapper{
display: flex;
}
.wrapper .static-txt{
color: #fff;
font-size: 60px;
font-weight: 400;
}
.wrapper .dynamic-txts{
margin-left: 15px;
height: 90px;
line-height: 90px;
overflow: hidden;
}
.dynamic-txts li{
list-style: none;
color: #FC6D6D;
font-size: 60px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(4) infinite;
}
@keyframes slide {
100%{
top: -360px;
}
}
.dynamic-txts li span{
position: relative;
margin: 5px 0;
line-height: 90px;
}
.dynamic-txts li span::after{
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: #343F4F;
border-left: 2px solid #FC6D6D;
animation: typing 3s steps(10) infinite;
}
@keyframes typing {
40%, 60%{
left: calc(100% + 30px);
}
100%{
left: 0;
}
}
Conclusion and Final words
In conclusion, creating a text typing animation is a valuable and useful web project. I believe that by following the steps outlined in this blog post, you’ve successfully created your own text-typing effect using HTML, CSS, and JavaScript. and Using Only Pure Css.