CSS एनिमेशन की मदद से, हम JavaScript का उपयोग करके टाइपराइटर टाइपिंग और डिलीटिंग प्रभाव बना सकते हैं।
निम्नलिखित उदाहरण इस प्रभाव को दर्शाता है।
उदाहरण
<!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>आउटपुट
यह निम्न परिणाम देगा:
