Text Typing Animation Effect using HTML CSS and JavaScript

Last Updated : 17 Nov, 2023

In this article, we will develop the Text Typing Animation effect using HTML, CSS, and JavaScript. We are making text typing animation in such a way that text is typed dynamically on screen with different text and different colors. We have used different CSS properties in order to design the webpage along with using the media queries of CSS for making the webpage responsive.

Preview

Approach

We have to create the basic HTML structure. It should include heading , paragraph, and dynamic text content from javascript.
Apply the CSS for styling the text with different font, colors and animations.
For showing the different custom text typing animations, we will store all the text in the array object.
Now use javascript to control that time or speed of dynamic which can be done by using setTimeout of Javascipt.

Example: In this example we will see the implementation of the Text typing animation on the website using HTML, CSS, and Javascript.

Javascript

let textdata = [
    "Learn DSA", "Learn JavaScript", 
    "Learn ReactJS", "Learn JAVA"
];
 
let ref = document.getElementById("text");
let cur = document.querySelector(".cursor");
let ind = 0;
let cInd = 0;
let remove = false;
 
function textTypeFunction() {
    if (ind < textdata.length) {
        let currentText = textdata[ind];
        if (!remove && cInd
            < currentText.length) {
            ref.textContent +=
                currentText.charAt(cInd);
            cInd++;
            setTimeout(textTypeFunction, 100);
        } else if (remove && cInd >= 0) {
            ref.textContent =
                currentText.substring(0, cInd);
            cInd--;
            setTimeout(textTypeFunction, 100);
        } else {
            remove = !remove;
            if (!remove) {
                ind++;
                if (ind >= textdata.length) {
                    ind = 0;
                }
            }
            setTimeout(textTypeFunction, 1000);
        }
    }
}
 
textTypeFunction();

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Text Typing Animation Effect</title>
</head>
 
<body>
    <div class="container">
        <div class="geeks-title">
            <h1>GeeksforGeeks.</h1>
            <h3 class="sub">
                Text Typing Animation
                on Website using HTML,
                CSS & JavaScript
              </h3>
        </div>
 
        <div class="typing">
            <span id="text"></span>
            <div class="cursor"></div>
        </div>
    </div>
     
    <script src="script.js"></script>
</body>
 
</html>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #a9fdf2;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
 
header {
    background-color: #4CAF50;
    color: #fff;
    padding: 20px;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
 
.sub {
    color: black;
}
 
.geeks-title {
    color: green;
    font-size: 36px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}
 
.typing-title {
    font-size: 24px;
    margin: 10px 0;
    color: green;
}
 
.container {
    margin-top: 20px;
}
 
.typing {
    display: inline-block;
    padding: 20px;
    font-size: 90px;
    color: rgba(60, 0, 255, 0.897);
    animation: typing 3s steps(20, end),
        colorChange 3s ease-in-out infinite;
}
 
.cursor {
    display: inline-block;
    width: 8px;
    height: 60px;
    background-color: rgb(204, 240, 0);
    animation: blink 0.7s infinite;
}
 
@keyframes typing {
    0% {
        width: 0;
    }
 
    100% {
        width: 100%;
    }
}
 
@keyframes colorChange {
    0%,
    100% {
        color: rgba(60, 0, 255, 0.897);
    }
 
    50% {
        color: rgba(255, 5, 5, 0.897);
    }
}
 
@keyframes blink {
    0%,
    100% {
        background-color: transparent;
    }
 
    50% {
        background-color: rgb(0, 0, 0);
    }
}
 
/* Media query for screens with 
a max width of 400px */
@media (max-width: 700px) {
    .geeks-title {
        font-size: 20px;
    }
 
    .typing-title {
        font-size: 16px;
    }
 
    .typing {
        font-size: 50px;
    }
 
    .cursor {
        height: 50px;
    }
}
 
@media (max-width: 400px) {
    .geeks-title {
        font-size: 15px;
    }
 
    .typing-title {
        font-size: 13px;
    }
 
    .typing {
        font-size: 40px;
    }
 
    .cursor {
        height: 40px;
    }
}