Table of Contents
How to Create Typing Effect javascript | typing effect html css javascript – codewithrandom
Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Typing Effect. We use HTML, Css, and javascript for this Typing Effect. Hope you enjoy our blog so let’s start with a basic HTML structure for a Typing Effect.
HTML code
<div class="container">
<p>CODEWITHRANDOM is for <span class="typed-text"></span><span class="cursor"> </span></p>
</div>
There is all HTML code for the Typing Effect. Now, you can see output without CSS, then we write css & javascript for Typing Effect.
@import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: #000;
color: #eee;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container p {
font-size: 2rem;
padding: 0.5rem;
font-weight: bold;
letter-spacing: 0.1rem;
text-align: center;
overflow: hidden;
}
.container p span.typed-text {
font-weight: normal;
color: #dd7732;
}
.container p span.cursor {
display: inline-block;
background-color: #ccc;
margin-left: 0.1rem;
width: 3px;
animation: blink 1s infinite;
}
.container p span.cursor.typing {
animation: none;
}
@keyframes blink {
0% { background-color: #ccc; }
49% { background-color: #ccc; }
50% { background-color: transparent; }
99% { background-color: transparent; }
100% { background-color: #ccc; }
}
Now we have completed our CSS section, Here is our updated output CSS.
const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");
const textArray = ["project", "fun", "free stuff", "tutorial"];
const typingDelay = 100;
const erasingDelay = 100;
const newTextDelay = 2000; // Delay between current and next text
let textArrayIndex = 0;
let charIndex = 0;
function type() {
if (charIndex < textArray[textArrayIndex].length) {
if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
charIndex++;
setTimeout(type, typingDelay);
}
else {
cursorSpan.classList.remove("typing");
setTimeout(erase, newTextDelay);
}
}
function erase() {
if (charIndex > 0) {
if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1);
charIndex--;
setTimeout(erase, erasingDelay);
}
else {
cursorSpan.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);
});
Final output
Now we have completed our javascript section, Here is our updated output with javascript. Hope you like the Typing Effect. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!
In this post, we learn how to create a Typing Effect using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.