Feature Coming Soon!
The newsletter functionality is under development.
Auto Text Using HTML, CSS & JavaScript
5 min read
Project Overview
This project demonstrates a dynamic "auto-typing" text effect using HTML, CSS, and JavaScript. It features a phrase where a portion of the text is automatically typed out, then erased, and replaced with another word from a predefined list, creating an engaging and interactive display. This effect is commonly used for hero sections, taglines, or dynamic content displays on websites to capture user attention.
The design uses a dark background with contrasting text colors for visual appeal. The core of the effect relies on JavaScript to manipulate the `textContent` of a `` element, character by character, with timed delays for typing and erasing. A blinking cursor is added using CSS to enhance the typing illusion. This project is an excellent example of combining HTML structure, simple CSS styling, and JavaScript timer functions to create a captivating text animation.
HTML Structure
The HTML structure for this auto-typing text effect is minimal and semantic. It consists of a `div` with the class `text-container` acting as a wrapper. Inside, there's a `p` element with the class `auto-text` that holds the main phrase. Within this `p` tag, there are two `span` elements: one with the class `js-text` for a static part of the text (e.g., "JavaScript"), and another with the class `typed-text` which is dynamically updated by JavaScript to display the typing and erasing words. Finally, a `span` with the class `cursor` and `aria-hidden="true"` creates the blinking cursor effect. A `script` tag links to an external JavaScript file (`app.js`) to handle the typing logic. This structure provides clear targets for CSS styling and JavaScript manipulation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Auto Text</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="text-container">
<p class="auto-text">
<span class="js-text">JavaScript</span> Is <span class="typed-text"></span>
<span class="cursor" aria-hidden="true"> </span>
</p>
</div>
<script src="app.js"></script>
</body>
</html>
CSS Styling
The CSS for this auto-typing text effect sets up the basic layout and styles the text elements, including the blinking cursor. The `body` is styled to center its content, has a dark `background`, and white `color` for the text. The `p` element has a large `font-size`. The `.js-text` class applies a yellow color to the "JavaScript" portion of the text, making it stand out. The `.typed-text` class applies a green color to the dynamically typed words. The `.cursor` class creates a small green background block that acts as the typing cursor. While not explicitly shown in the provided CSS snippet, a typical implementation would also include a CSS animation (using `@keyframes`) for the `.cursor` to make it blink, creating a realistic typing effect. This styling ensures the text is prominent and the typing animation is visually clear.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: sans-serif;
background: #000;
color: #fff;
}
p {
font-size: 3rem;
}
.js {
color: yellow;
}
.typed-text {
color: #20c20e;
}
.cursor {
background: #20c20e;
}
JavaScript
The JavaScript for this project is the core logic behind the auto-typing effect. It selects the `.typed-text` span and the `.cursor` span. It defines an array of `words` to be typed, along with `typingDelay`, `erasingDelay`, and `newLetterDelay` constants to control the animation speed. `index` tracks the current word in the `words` array, and `charIndex` tracks the current character being typed or erased. The `DOMContentLoaded` event listener ensures the `type` function is called after a delay once the page is loaded. The `type()` function iteratively adds characters to `typedTextSpan.textContent` until the current word is fully typed, then calls `erase()`. The `erase()` function iteratively removes characters from `typedTextSpan.textContent` until the word is gone, then increments `index` to move to the next word (looping back to the beginning if all words are typed), and calls `type()` again. This recursive use of `setTimeout` creates the continuous typing and erasing animation.
const typedTextSpan = document.querySelector(".typed-text");
const cursor = document.querySelector(".cursor");
const words = ["Awesome", "Fun", "Cool", "Life", "Famous", "Weird"];
const typingDelay = 200;
const erasingDelay = 200;
const newLetterDelay = 2000;
let index = 0;
let charIndex = 0;
document.addEventListener("DOMContentLoaded", () => {
if (words.length) {
setTimeout(type, newLetterDelay);
}
});
function type() {
if (charIndex < words[index].length) {
typedTextSpan.textContent += words[index].charAt(charIndex);
charIndex++;
setTimeout(type, typingDelay);
} else {
setTimeout(erase, newLetterDelay);
}
}
function erase() {
if (charIndex > 0) {
typedTextSpan.textContent = words[index].substring(0, charIndex - 1);
charIndex--;
setTimeout(erase, erasingDelay);
} else {
index++;
if (index >= words.length) {
index = 0;
}
setTimeout(type, typingDelay + 1100);
}
}
Live Demo: Auto Text Effect
Watch a live demonstration of the Auto Text Effect below.
Final Thoughts
This Auto Text Effect project provides a dynamic and engaging way to display text content, making your website more interactive and visually appealing. By leveraging JavaScript's `setTimeout` function to control typing and erasing, combined with simple HTML and CSS for structure and styling, it creates a captivating animation. This effect is perfect for showcasing key messages, skills, or dynamic taglines on a homepage or portfolio.
You can easily customize this component by:
- Changing the `words` array in JavaScript to display different sequences of text.
- Adjusting `typingDelay`, `erasingDelay`, and `newLetterDelay` to control the speed and pacing of the animation.
- Modifying the `font-size` and `color` properties in CSS for the text elements to match your design.
- Adding more sophisticated CSS animations for the cursor (e.g., a fade-in/fade-out effect) to make it more realistic.
- Integrating this effect into a larger hero section or banner on your website.
Pro Tip
For better performance and smoother animations, especially on older devices or with many elements, try to use CSS `transform` and `opacity` for animations rather than properties that trigger layout recalculations (like `width` or `height`). While this project uses `textContent` manipulation, for more complex text animations, consider libraries like Typed.js or Textillate.js, which offer more features and optimizations.
Ready to Use This Project?
Click the button below to download the full source code. Download will be ready in 10 seconds.