T-Writer: effetto "macchina da scrivere" in Javascript

T-Writer è una plug-in Javascript, libero da dipendenze, che permette di realizzare un particolare tipo di animazioni che possiamo chiamare effetti "macchina da scrivere". Come tutti sappiamo, una macchina da scrivere produce un carattere alla volta. Questa particolare tipologia di battitura può essere tranquillamente replicata nel mondo virtuale, attraverso dei controlli Javascript, per produrre degli effetti molto gradevoli, che sono utilizzati anche per le animazioni testuali di molti slogan commerciali. Ma perché creare da soli uno snippet, quando abbiamo a disposizione prodotti open-source perfettamente funzionanti?

E' questo il caso di T-Writer, e le demo parlano da sole. Il plug-in è decisamente facile da usare, leggero, completo, e soprattutto, come abbiamo dichiarato in apertura, è standalone, ovvero non dipende da altri framework per essere utilizzato.

L'utilizzo è molto semplice:

// elemento target definito da una classe <div class="tw"></div>
const target = document.querySelector('.tw')
const options = {
  loop: true
}
const writer = new Typewriter(target, options)

Intanto dobbiamo creare un'istanza della classe Typewriter (o quante istante vogliamo). In fase di inizializzazione passiamo l'elemento container che verrà convertito in "macchina da scrivere" (nel caso precedente, il div con classe tw) ed un oggetto per la configurazione delle opzioni.

A questo punto dobbiamo utilizzare i metodi della classe per impostare alcuni parametri (come il testo e la durata) ed infine richiamare il metodo start per azionare l'animazione:

writer
  .type('A simple syntax makes it easy.')
  .rest(500)
  .start()
Con l'opzione "loop" settata a true, l'effetto sarà continuo.
E' possibile incatenare più comandi in un unica animazione (chaining), come ad esempio l'impostazione di cancellazioni e modifiche e la sincronizzazione di callbacks:
const writer = new Typewriter(target, {
  loop: true,
  typeSpeed: 80,
  deleteSpeed: 80,
  typeColor: 'red'
})

writer
  .type('You can type')
  .rest(500)
  .changeOps({ deleteSpeed: 80 })
  .remove(4)
  .type('edit')
  .rest(500)
  .remove(4)
  .type('synchronize callbacks')
  .rest(500)
  .changeOps({ deleteSpeed: 20 })
  .remove(21)
  .type('change options on the go')
  .rest(500)
  .clear()
  .start()
Utilizzando il metodo "string" possiamo usare una combinazione di testi applicati ad un unico elemento per complicare l'animazione:
const writer = new Typewriter(target, {
  loop: true,
  typeColor: 'red'
})
writer
  .strings(
    400,
    "Set many strings",
    "In just one call",
    "Using the 'strings' method"
  )
  .start()

Ed addirittura fondere tutto insieme, utilizzando più istanze simultaneamente:

const writer1 = new Typewriter(target1, {
  typeSpeed: 60
})
const writer2 = new Typewriter(target2, {
  typeSpeed: 60
})
writer1
  .type('Combo typewriters to')
  .removeCursor()
  .then(writer2.start.bind(writer2))
  .start()
writer2
  .type("create complex effects")
  .rest(500)
  .clear()
  .changeTypeColor('red')
  .type("defy user expectations")
  .rest(500)
  .clear()
  .changeTypeColor('blue')
  .type("generate a custom loop")
  .rest(500)
  .clear()
  .changeTypeColor('black')
  .then(writer1.start.bind(writer1))

Gli effetti che ne risultano sono davvero accattivanti. Sulla pagina ufficiale GitHub del progetto è inoltre possibile trovare l'ottima documentazione dettagliata del plug-in, che possiede un'API semplice ma completa e meritevole di attenzione, delle demo perfettamente funzionanti, alcuni consigli di utilizzo e, ovviamente, il pacchetto da scaricare. T-writer è rilasciato con licenza MIT-style.

Via T-Writer