Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Typing and Deleting Effect with JavaScript and CSS
With the help of CSS animations, we can create a typewriter typing and deleting effect using JavaScript. The infinite effect continuously cycles through words, typing them character by character and then deleting them to create an engaging visual animation.
Syntax
@keyframes animationName {
to { opacity: value; }
}
selector {
animation: name duration iteration-count;
}
HTML Structure
First, create a container with two paragraph elements − one for the text and another for the cursor:
<div> <p id="text"></p> <p>|</p> </div>
CSS Styling
Style the paragraph elements with a monospace font and set up the cursor animation:
p {
font-family: "Courier New", monospace;
font-size: 2em;
color: red;
}
p:last-of-type {
animation: blink 0.8s infinite;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
JavaScript Functions
The typing effect is controlled by two main functions − one for typing and one for deleting characters:
const words = ["Hello", "World", "Typewriter Effect"];
let i = 0;
function typeNow() {
let word = words[i].split("");
var loopTyping = function() {
if (word.length > 0) {
document.getElementById('text').innerHTML += word.shift();
} else {
setTimeout(deleteNow, 1000);
return false;
}
setTimeout(loopTyping, 150);
};
loopTyping();
}
function deleteNow() {
let word = words[i].split("");
var loopDeleting = function() {
if (word.length > 0) {
word.pop();
document.getElementById('text').innerHTML = word.join("");
} else {
i = (i + 1) % words.length;
setTimeout(typeNow, 500);
return false;
}
setTimeout(loopDeleting, 100);
};
loopDeleting();
}
Complete Example
Here's a complete working example of the typewriter effect:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #1a1a1a;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.typewriter-container {
display: flex;
padding: 20px;
border: 2px solid #00ff00;
border-radius: 10px;
background-color: #000;
}
p {
font-family: "Courier New", monospace;
font-size: 2em;
color: #00ff00;
margin: 0;
}
p:last-of-type {
animation: blink 0.8s infinite;
margin-left: 5px;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
</style>
</head>
<body>
<div class="typewriter-container">
<p id="text"></p>
<p>|</p>
</div>
<script>
const words = ["Hello World!", "CSS Animations", "JavaScript Magic", "Typewriter Effect"];
let i = 0;
function typeNow() {
let word = words[i].split("");
var loopTyping = function() {
if (word.length > 0) {
document.getElementById('text').innerHTML += word.shift();
} else {
setTimeout(deleteNow, 1500);
return false;
}
setTimeout(loopTyping, 150);
};
loopTyping();
}
function deleteNow() {
let word = words[i].split("");
var loopDeleting = function() {
if (word.length > 0) {
word.pop();
document.getElementById('text').innerHTML = word.join("");
} else {
i = (i + 1) % words.length;
setTimeout(typeNow, 500);
return false;
}
setTimeout(loopDeleting, 100);
};
loopDeleting();
}
typeNow();
</script>
</body>
</html>
A terminal-like interface with a green border appears, showing words being typed character by character followed by a blinking cursor. Each word is completely typed, pauses, then gets deleted character by character before the next word begins. The effect cycles through: "Hello World!", "CSS Animations", "JavaScript Magic", "Typewriter Effect" continuously.
Conclusion
The typewriter effect combines CSS animations for the blinking cursor with JavaScript functions that manipulate text content using setTimeout(). This creates a realistic typing and deleting animation that cycles infinitely through an array of words.
2K+ Views
