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.
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:
1. Create a folder. You can put any name of this folder and create the below-mentioned files inside this folder.
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
First, paste the following codes into your index.html file.
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<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>
<h1>Coding is <span></span></h1>
<!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>
Second, paste the following codes into your style.css file.
/* Importing Google font - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
font-family: "Inter", sans-serif;
transform: translateY(-45%);
animation: blink 0.7s infinite;
h1 span.stop-blinking::before {
/* 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 }
}
Last, paste the following codes into your script.js file.
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
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
setTimeout(typeEffect, 200);
} else if (isDeleting && charIndex > 0) {
// If condition is true, remove the previous character
setTimeout(typeEffect, 100);
// 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);
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();
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.
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.