Typewriter

Text Typing Animation with html, css, and JavaScript.

Elevate your web design and engage your audience with this dynamic and attention-grabbing text animation. Start now and bring your web pages to life with the magic of text typing effects!

Demo Typewriter animation

What Now?

Add a code or markdown block to your Site.

This article will fully show you how to add that to your own pages..

Let’s start with creating the text we intend to animate. We don’t need much; we will create a paragraph or text element to manipulate. This can be any text you want.

<div class="typewriter-container">
    <h1 id="typewriter"></h1>
</div>

As shown below, we will use the css animation property and the keyframe rules to manipulate the text element to achieve the typewriter effect.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    }

.typewriter-container {
    font-size: 2rem;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    border-right: 0.15em solid #aaa;
    animation: blink-caret 0.75s step-end infinite;
    }

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: #aaa;
    }
}
    

The typewriter animation is a great way to add some visual interest to your website or page and is easy to create using JavaScript code.

document.addEventListener("DOMContentLoaded", function() {
    const text = "Hi, I'm Dervic!";
    let index = 0;
    const speed = 130;
    const typewriterElement = document.getElementById("typewriter");

    function typeWriter() {
        if (index < text.length) {
          typewriterElement.textContent += text.charAt(index);
            index++;
        setTimeout(typeWriter, speed);
        }
    }

    typeWriter();
});