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
