Java-Scripts.net

Typewriter Text Effect

Add a dynamic headline. This script automatically "types" a string of text into a container, creating a sophisticated and engaging intro for your webpage.

Copy the Script

<h1 id="typewriter"></h1>

<script>
var text = "Hello, welcome to my website.";
var i = 0;
var speed = 100; // Speed in milliseconds

function typeWriter() {
  if (i < text.length) {
    document.getElementById("typewriter").innerHTML += text.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

// Start on load
window.onload = typeWriter;
</script>

Frequently Asked Questions

Yes. Check if `index > text.length`, then reset `index = 0` and clear the text content to start over.

It's tricky. If you type HTML tags (like ``) character by character, they will appear as text until the tag is closed. It is better to type plain text into an element that already has the desired styling.

This script focuses on the typing logic. To add a blinking cursor, use CSS: `border-right: 2px solid black; animation: blink 1s infinite;`.