Ad Code

Creating a Typing Animation with HTML, CSS, and JavaScript

Ashish Kumar October 16, 2024


Have you ever wanted to create a simple typing animation effect for your website? In this blog post, we'll walk through a step-by-step guide to building an interactive typing effect using HTML, CSS, and JavaScript. The effect simulates typing text onto the screen with a blinking cursor—perfect for adding an engaging touch to your web page.

1. HTML Structure

We'll start by creating a basic HTML file. This file will include a <span> to display the typing text and another <div> containing the cursor.

<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>Typing Animation</title>
    <link href="./style.css" rel="stylesheet"></link>
</head>
<body>
    <span id="typing"></span>
    <div id="cursor-container">
        <span id="cursor"></span>
    </div>
    <script src="./script.js"></script>
</body>
</html>

The #typing span will display the characters as they "type" out, and the #cursor-container holds the animated cursor that blinks at the end of the text.

2. CSS Styling

Next, let's style the typing text and cursor. We want the background to be black, the text white, and the cursor to blink to mimic a terminal-like effect.


#typing {
    background-color: black;
    color: white;
    font: 36px Arial;
}

#typing::before {
    content: "> ";
    color: greenyellow;
}

#cursor-container {
    display: inline;
    background-color: black;
    font: 36px Arial;
    padding: 0px 3px;
}

#cursor {
    display: inline-block;
    background-color: greenyellow;
    width: 20px;
    height: 5px;
}

@keyframes blink {
    0% {
      opacity: 0%;
    }
    50% {
      opacity: 100%;
    }
    100% {
      opacity: 0%;
    }
}

Explanation:

  • The #typing element displays the text. We've added a ::before pseudo-element to simulate a command-line prompt (> ) in greenyellow, giving a terminal-like appearance.
  • The #cursor is styled as a small greenyellow rectangle that mimics the look of a typing cursor.
  • We also define a blink animation for the cursor, which fades in and out periodically to simulate the blinking effect.

3. JavaScript Typing Effect

The heart of this project is the JavaScript file, which animates the text by "typing" it out letter by letter.


const typing = document.getElementById("typing")
const sentence = "Hello, I am Ashish Kumar, welcome to this page".split("")

const len = sentence.length
let i = 0
const id = setInterval(() => {
  if (i < len) {
    typing.innerText = sentence.slice(0, i + 1).join('')
    i++
  } else {
    clearInterval(id)
    const cursor = document.getElementById("cursor")
    cursor.style.animation = "blink 1s infinite"
  }
}, 100)

Explanation:

  • We first select the #typing element using getElementById.
  • The sentence variable holds the text that will be typed out, split into individual characters using .split("").
  • Using setInterval(), we loop over each character and add it one by one to the inner text of the #typing span every 100 milliseconds.
  • Once the sentence is complete, we clear the interval and trigger the cursor's blinking animation.
Output:



Putting It All Together

When the page loads, the text will appear to be typed out, and the cursor will start blinking at the end. This effect mimics typing in a command-line environment or chat, making your page feel more interactive and dynamic.

Conclusion

With just a few lines of HTML, CSS, and JavaScript, you can create a neat typing animation for your web projects. This is a simple yet powerful way to engage users and add a bit of personality to your page. Try playing around with different sentences, typing speeds, or styles to customize this effect further!

Post a Comment

0 Comments

Ad Code