- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 following example shows this effect.
Example
<!DOCTYPE html> <html> <style> div { display: flex; margin: 4%; padding: 2%; box-shadow: inset 0 0 12px blue; } p { font-family: "Courier Monospace"; font-size: 2em; color: red; } p:last-of-type { animation: type 0.33s infinite; } @keyframes type{ to { opacity: .0; } } </style> <body> <div> <p id="text"></p> <p>|</p> </div> <script> const words = ["Nulla", "facilisi", "Cras sed odio sed leo laoreet molestie id non purus.."]; let i = 0; let counter; function typeNow() { let word = words[i].split(""); var loopTyping = function() { if (word.length > 0) { document.getElementById('text').innerHTML += word.shift(); } else { deleteNow(); return false; }; counter = setTimeout(loopTyping, 200); }; loopTyping(); }; function deleteNow() { let word = words[i].split(""); var loopDeleting = function() { if (word.length > 0) { word.pop(); document.getElementById('text').innerHTML = word.join(""); } else { if (words.length > (i + 1)) { i++; } else { i = 0; }; typeNow(); return false; }; counter = setTimeout(loopDeleting, 200); }; loopDeleting(); }; typeNow(); </script> </body> </html>
Output
This will produce the following result −
- Related Articles
- How to create a typing effect with JavaScript?
- Wave effect with CSS?
- Flip Effect with CSS
- How to Create a Parallax Effect using HTML, CSS, and JavaScript?
- Pulse Animation Effect with CSS
- Wobble Animation Effect with CSS
- Shake Animation Effect with CSS
- Swing Animation Effect with CSS
- Tada Animation Effect with CSS
- Set Mask Effect with CSS
- Wiggle Animation Effect with CSS
- Bounce Animation Effect with CSS
- Flash Animation Effect with CSS
- Flip Animation Effect with CSS
- Set Invert Effect with CSS

Advertisements