Typed.js: typewriter in JS

Typed.js is a Javascript library that allows you to write text as if it were a typewriter.
The software allows you to write, delete and rewrite the input text. You can also enable a flashing cursor.
Typed.js license
Typed.js on GitHub

Example page
    1 <!DOCTYPE html>
    2 <html>
    3     <head>
    4         <meta charset="utf-8">
    5         <title>Typed.js</title>
    6         <style>
    7             #test1 {
    8                 position: absolute;
    9                 top: 0;
   10                 left: 0;
   11                 font-size: 3em;
   12                 writing-mode: vertical-lr;
   13                 margin: 0.5em;
   14             }
   15             #test2 {
   16                 font-size: 2em;
   17             }
   18             #test2rot {
   19                 width: max-content;
   20                 rotate: 30deg;
   21             }
   22             #test2move {
   23                 position: absolute;
   24                 top: 10em;
   25                 left: 5em;
   26             }
   27             #test3 {
   28                 font-size: 2em;
   29                 position: absolute;
   30                 top: 12em;
   31                 left: 5em;
   32             }
   33         </style>
   34     </head>
   35     <body>
   36         <script src="typedjs/typed.umd.js"></script>
   37         <div id="test1strings">
   38             <p>Test in vertical</p>
   39             <p>This is a test n.1</p>
   40             <p>This is a test n.2</p>
   41             <p>This is a test n.3</p>
   42         </div>
   43         <div id="test1"></div>
   44         <div id="test2strings">
   45             <p>Test in rotation</p>
   46             <p>This is a test n.1</p>
   47             <p>This is a test n.2</p>
   48             <p>This is a test n.3</p>
   49         </div>
   50         <div id="test2move">
   51             <div id="test2rot">
   52                 <div id="test2"></div>
   53             </div>
   54         </div>
   55         <div id="test3strings">
   56             <p>Test in horizontal</p>
   57             <p>This is a test n.1</p>
   58             <p>This is a test n.2</p>
   59             <p>This is a test n.3</p>
   60         </div>
   61         <div id="test3"></div>
   62         <script>
   63             let typed1 = new Typed('#test1', {
   64                 stringsElement: '#test1strings',
   65                 typeSpeed: 60,
   66                 loop: true,
   67                 showCursor: false
   68             });
   69             let typed2 = new Typed('#test2', {
   70                 stringsElement: '#test2strings',
   71                 typeSpeed: 60,
   72                 loop: true,
   73                 showCursor: false
   74             });
   75             let typed3 = new Typed('#test3', {
   76                 stringsElement: '#test3strings',
   77                 typeSpeed: 60,
   78                 loop: true,
   79                 showCursor: false
   80             });
   81         </script>
   82     </body>
   83 </html>
2024
Jan, 23