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 YouTube video.
Video Tutorial of Text Typing Effect HTML & JavaScript
If you enjoy learning through video tutorials, the above YouTube video is an excellent resource. In the video, I’ve explained each line of code and provided informative comments to make the process of creating your own text-typing animation beginner-friendly and easy to follow.
However, 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
To create a custom text typing effect using HTML, CSS, and vanilla JavaScript, follow these simple step-by-step instructions:
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create anÂ
index.html file. The file name must be index and its extension .html - Create aÂ
style.css file. The file name must be style and its extension .css - 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 CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing Text Effect | CodingNepal</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. To understand JavaScript code better, I recommend watching the above video tutorial, paying close attention to the code comments, and experimenting with the code.
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.
To further improve your web development skills, I recommend you try recreating the same text-typing animation using only HTML and CSS. By creating this effect, you’ll gain a better understanding of how CSS properties and animations are used to create cool text typing effects.
If you encounter any problems while creating your text-typing effect, you can download the source code files for this project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.
