Create text typing effect with vanilla JavaScript
The text typing effect in JavaScript refers to an animation style where text is displayed as if it’s being typed out one character at a time, similar to how words appear when someone is typing them on a keyboard.
This effect can add a dynamic, engaging element to a website, often used in headers, introductions, or any element where you want to grab the user’s attention.
The basic idea behind the smooth typing effect is to display a string of text incrementally, letter by letter, over a set interval. This gives the illusion that the text is being typed out in real time.
Here’s how you can create tabbed navigation using HTML, CSS and a bit of JavaScript.
Hi, I'm Josef,
I design & develop
HTML
<h1>
<span>Hi, I'm Josef,</span><br>
<span>I design & develop</span><br>
<span id="post-typing-animation"></span>
</h1>
CSS
#post-typing-animation {
position: relative;
}
#post-typing-animation:after {
left: 100%;
content: "";
position: absolute;
top: 0;
height: 100%;
width: 100%;
border-left: 2px solid #000000;
}
JavaScript
const animatedTextElement = document.getElementById("post-typing-animation");
const animatedTextArray = ["Static Websites.", "WordPress Websites.", "Web Applications.", "Landing Pages.", "HTML Emails."];
let indexValue = 0;
let speedValue = 160;
let isTypingValue = true;
let textIndexValue = 0;
function typeAnimatedText() {
let text = animatedTextArray[textIndexValue];
if (isTypingValue) {
if (indexValue < text.length) {
animatedTextElement.textContent += text[indexValue];
indexValue++;
} else {
isTypingValue = false;
}
} else {
if (indexValue > 0) {
animatedTextElement.textContent = text.slice(0, indexValue - 1);
indexValue--;
} else {
isTypingValue = true;
textIndexValue = (textIndexValue + 1) % animatedTextArray.length;
}
}
setTimeout(typeAnimatedText, speedValue);
}
typeAnimatedText();
Animated text typing effect mentioned in this blog post can add more dynamic and engaging user experience for your website.
Feel free to copy/paste code above, modify it to your needs and implement it in any project you working on.
I hope this little snippet of code helps you.
Happy coding
