Text Typing Animation Effect using HTML CSS and JavaScript

Name: Text Typing Animation Effect using HTML CSS and JavaScript
Uploaded: 2024-07-24T16:40:41Z
Duration: 8 min 18 s

Last Updated : 18 Nov, 2024

To create a text-typing animation effect, we will use a combination of HTML structure, CSS animations, and JavaScript logic to create the typing and deleting text like effect.

HTML

<!-- index.html -->

<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="typing"><span id="text"></span>
            <div class="cursor"></div>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

CSS

/* styles.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;
}


.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);
    }
}

JavaScript

//main.js

let a = ["Learn DSA", "Learn JavaScript", "Learn ReactJS", "Learn JAVA"];
let ref = document.getElementById("text");
let ind = 0, cInd = 0;
let remove = false;

function typing() {
    if (ind < a.length) {
        let currentText = a[ind];
        if (!remove && cInd < currentText.length) {
            ref.textContent += currentText.charAt(cInd);
            cInd++;
            setTimeout(typing, 100);
        } else if (remove && cInd >= 0) {
            ref.textContent = currentText.substring(0, cInd);
            cInd--;
            setTimeout(typing, 100);
        } else {
            remove = !remove;
            if (!remove) {
                ind = (ind + 1) % a.length;
            }
            setTimeout(typing, 1000);
        }
    }
}

typing();

Output

Explanation

HTML Structure: The HTML contains a title and a container with a <span> element for the animated text and a <div> for the blinking cursor.
CSS Styling: Styles are applied for the overall layout and animations, including a color-changing and blinking cursor effect.
JavaScript Typing Logic: The JavaScript function iteratively adds and removes characters from the text using a loop to create the typing and deleting effect.
Customizable Text Array: The textdata array stores phrases to be typed, and they can be easily modified to change the displayed messages.
Animation Timings: The setTimeout function controls the speed of the typing and deleting animations, which can be adjusted for different effects.

gauravggeeksforgeeks

Improve

Article Tags :

Text Typing Animation Effect using HTML CSS and JavaScript

Similar Reads

Thank You!

What kind of Experience do you want to share?