Hello in this tutorial, we will see how to make a text typing animation with HTML,CSS and JavaScript. In this, main work is of JavaScript. Firstly, we will create one div which will contain three more span tag. First span tag will contain "I am a" and second span will be blank in which we will add changing text using JavaScript (Refer code). And the last span will contain blinking line like this one "|"
So, below are the HTML, CSS and JS code You can check them out.
Code(s):
<body>
<div class="text-animation">
<span id="iam">I am a </span>
<span id="text"></span>
<span id="line">|</span>
</div>
</body>
<style>
* {
background: #11998e;
font-family: sans-serif;
}
.text-animation {
font-size: 20px;
text-align: center;
position: absolute;
left: 5%;
margin-top: 20%;
}
#iam {
font-size: 50px;
color: #f2f2f2;
margin: 0.4em 0;
}
#text {
font-size: 50px;
letter-spacing: .15rem;
color:#f5af19;
}
#line {
animation: line 0.4s infinite linear;
font-size: 50px;
color: #f2f2f2;
font-weight: 500;
}
@keyframes line {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
const text = document.querySelector("#text");
const blinking_line = document.querySelector("#line");
const textArray = ["Developer.", "Freelancer.", "Photographer.", "Android Developer."];
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 1000; // Delay between current and next text
let textArrayIndex = 0;
let charIndex = 0;
function type() {
if (charIndex < textArray[textArrayIndex].length) {
if (!blinking_line.classList.contains("typing")) blinking_line.classList.add("typing");
text.textContent += textArray[textArrayIndex].charAt(charIndex);
charIndex++;
setTimeout(type, typingDelay);
}
else {
blinking_line.classList.remove("typing");
setTimeout(erase, newTextDelay);
}
}
function erase() {
if (charIndex > 0) {
if (!blinking_line.classList.contains("typing")) blinking_line.classList.add("typing");
text.textContent = textArray[textArrayIndex].substring(0, charIndex - 1);
charIndex--;
setTimeout(erase, erasingDelay);
}
else {
blinking_line.classList.remove("typing");
textArrayIndex++;
if (textArrayIndex >= textArray.length) textArrayIndex = 0;
setTimeout(type, typingDelay + 1100);
}
}
document.addEventListener("DOMContentLoaded", function () { // On DOM Load initiate the effect
if (textArray.length) setTimeout(type, newTextDelay + 250);
});
//code inspired from Codepen user --Coding Journey--
ADVERTISEMENT
Background color may differ.
Output:
I am a
|
