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.

Text Typing Animation Effect using HTML CSS and JavaScript

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?