Come Creare un Effetto Macchina da Scrivere sul Tuo Sito con Typed.js

Typed.js è la libreria JavaScript più usata per creare l’effetto macchina da scrivere sul web: leggera, zero dipendenze, configurabile in pochi minuti. In questa guida trovi la configurazione completa, tutte le opzioni disponibili, e un confronto con le alternative moderne per aiutarti a scegliere lo strumento giusto.

Installazione

Via CDN (cdnjs)

<!-- Aggiungi prima della chiusura di </body> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.1.0/typed.umd.js"></script>

Via npm (pacchetto ufficiale)

npm install typed.js

import Typed from 'typed.js';

Configurazione base

Struttura HTML minima: un elemento target dove Typed.js scriverà il testo.

<h1>Sono <span id="typed"></span></h1>

const typed = new Typed('#typed', {
  strings: ['un developer', 'un freelance', 'un CyberAlchimista'],
  typeSpeed: 80,
  backSpeed: 50,
  loop: true,
});

Tutte le opzioni disponibili

Esempio con opzioni avanzate

const typed = new Typed('#typed', {
  strings: ['React Developer', 'Freelance', 'CyberAlchimista'],
  typeSpeed: 60,
  backSpeed: 40,
  backDelay: 1500,      // pausa di 1.5s prima di cancellare
  startDelay: 500,      // inizia dopo 500ms
  smartBackspace: true, // cancella solo la parte che cambia
  loop: true,
  showCursor: true,
  cursorChar: '_',      // cursore personalizzato
});

Scrivere in un placeholder

const typed = new Typed('#search-input', {
  strings: ['Cerca un tutorial...', 'Cerca CSS animations...', 'Cerca JavaScript...'],
  attr: 'placeholder',
  loop: true,
  typeSpeed: 50,
  backSpeed: 30,
});

Callbacks

Typed.js espone callback per reagire agli eventi dell’animazione.

const typed = new Typed('#typed', {
  strings: ['Prima stringa', 'Seconda stringa'],
  typeSpeed: 60,
  loop: false,

  onBegin: (arrayPos, self) => {
    console.log('Animazione iniziata');
  },
  onComplete: (self) => {
    console.log('Tutte le stringhe completate');
    self.cursor.remove(); // rimuovi il cursore alla fine
  },
  onStringTyped: (arrayPos, self) => {
    console.log(`Stringa ${arrayPos} completata`);
  },
  onLastStringBackspaced: (self) => {
    console.log('Ultima stringa cancellata');
  },
  preStringTyped: (arrayPos, self) => {
    console.log(`Sta per scrivere la stringa ${arrayPos}`);
  },
});

Accessibilità

L’effetto macchina da scrivere può creare problemi agli screen reader. Aggiungi aria-label sull’elemento contenitore per fornire un testo alternativo statico:

<h1 aria-label="Sono un developer freelance">
  Sono <span id="typed" aria-hidden="true"></span>
</h1>

L’aria-hidden="true" sull’elemento animato fa sì che lo screen reader legga solo il testo statico del contenitore, ignorando il testo che cambia continuamente.

Alternative a Typed.js — quando usarle

Effetto macchina da scrivere con solo CSS (alternativa zero-JS)

Se hai una sola stringa e non hai bisogno di loop dinamico, questa è la soluzione più leggera:

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid;
  width: 0;
  animation:
    typing 2s steps(20) forwards,
    cursor 0.6s step-end infinite;
}

@keyframes typing {
  to { width: 100%; }
}

@keyframes cursor {
  50% { border-color: transparent; }
}

<p class="typewriter">CyberAlchimista.it</p>

Controllo manuale — stop, start, destroy

const typed = new Typed('#typed', {
  strings: ['Prima', 'Seconda'],
  typeSpeed: 60,
  loop: true,
});

// Ferma l'animazione
typed.stop();

// Riprendi
typed.start();

// Distruggi e rimuovi il cursore (utile nei componenti React/Vue)
typed.destroy();

Hai trovato utile questo articolo? Seguimi su @cyberalchimista per altri tutorial e consigli sullo sviluppo web. Per domande o progetti, contattami.