Typed.js: Telescrivente in JS

Typed.js è una libreria Javascript che permette di scrivere il testo come se fosse una macchina da scrivere.^500
Il software permette di scrivere, cancellare e riscrivere il testo in input. ^500 È anche possibile mostrare un cursore lampeggiante.

Typed.js licenza
Typed.js su GitHub

Pagina di esempio

    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             #test2sposta {
   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="test1stringhe">
   38             <p>Prova in verticale</p>
   39             <p>Questa &egrave; una prova n.1</p>
   40             <p>Questa &egrave; una prova n.2</p>
   41             <p>Questa &egrave; una prova n.3</p>
   42         </div>
   43         <div id="test1"></div>
   44         <div id="test2stringhe">
   45             <p>Prova in rotazione</p>
   46             <p>Questa &egrave; una prova n.1</p>
   47             <p>Questa &egrave; una prova n.2</p>
   48             <p>Questa &egrave; una prova n.3</p>
   49         </div>
   50         <div id="test2sposta">
   51             <div id="test2rot">
   52                 <div id="test2"></div>
   53             </div>
   54         </div>
   55         <div id="test3stringhe">
   56             <p>Prova in orizzontale</p>
   57             <p>Questa &egrave; una prova n.1</p>
   58             <p>Questa &egrave; una prova n.2</p>
   59             <p>Questa &egrave; una prova n.3</p>
   60         </div>
   61         <div id="test3"></div>
   62         <script>
   63             let typed1 = new Typed('#test1', {
   64                 stringsElement: '#test1stringhe',
   65                 typeSpeed: 60,
   66                 loop: true,
   67                 showCursor: false
   68             });
   69             let typed2 = new Typed('#test2', {
   70                 stringsElement: '#test2stringhe',
   71                 typeSpeed: 60,
   72                 loop: true,
   73                 showCursor: false
   74             });
   75             let typed3 = new Typed('#test3', {
   76                 stringsElement: '#test3stringhe',
   77                 typeSpeed: 60,
   78                 loop: true,
   79                 showCursor: false
   80             });
   81         </script>
   82     </body>
   83 </html>

2024
23 gen