Are you looking to add an engaging text animation to your website? A letter-by-letter reveal effect is a great way to grab users’ attention and make your site feel dynamic. In this tutorial, we’ll create a simple JavaScript animation that types out words letter by letter, erases them, and then repeats the cycle with new words.
Why Use a Typing Animation?
A typing animation can make your website more interactive and engaging. It’s commonly used in:
- Landing pages to highlight key messages
- Portfolios to showcase skills dynamically
- Loading screens for a professional touch
Now, let’s dive into the code!
Video Tutorial:
Step 1: Set Up the HTML
First, create a simple HTML structure with a container for our text animation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Letter By Letter Reveal</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="text-container"></div>
<script src="script.js"></script>
</body>
</html>
The <div class="text-container"></div> is where our text animation will appear.
Step 2: Add Some Styling
To make the animation look good, we need some CSS. Save this as style.css.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #3991f5;
font-family: "Poppins", sans-serif;
color: #ffffff;
overflow: hidden;
}
.text-container {
text-align: center;
font-size: 2.5rem;
}
This will center the text on the screen and give it a clean, modern look.
Step 3: Implement the JavaScript Logic
Now, let’s write the JavaScript to create the letter-by-letter reveal effect. Save this as script.js.
const textContainer = document.querySelector(".text-container");
const phrases = ["Awesome", "Fun", "Challenging", "Fantastic"];
let phraseIndex = 0;
let letterIndex = 0;
let isDeleting = false;
function typeEffect() {
const currentPhrase = phrases[phraseIndex];
const displayText = currentPhrase.slice(0, letterIndex);
textContainer.innerHTML = `<h1>Coding is ${displayText}</h1>`;
if (!isDeleting && letterIndex < currentPhrase.length) {
letterIndex++;
setTimeout(typeEffect, 200); // Typing speed
} else if (isDeleting && letterIndex > 0) {
letterIndex--;
setTimeout(typeEffect, 100); // Deleting speed
} else {
isDeleting = !isDeleting;
if (!isDeleting) {
phraseIndex = (phraseIndex + 1) % phrases.length;
}
setTimeout(typeEffect, 1000); // Pause before switching
}
}
typeEffect();
How It Works:
✅ Types out the text letter by letter ✅ Erases the text letter by letter ✅ Loops through the phrases infinitely ✅ Includes a short pause before switching to the next phrase
Final Thoughts
With just a few lines of JavaScript, we’ve created a smooth and engaging typing animation! This effect can be customized further by changing the words, adjusting the speed, or adding CSS transitions for an even cooler effect.
If you want to make your website feel more interactive, try implementing this text reveal effect today!
🚀 Happy coding!
