Luigi Cavalieri - Authoring Open Source Code

CharWriter.js: Animazioni Stile "Macchina da Scrivere" in Vanilla JavaScript

Pubblicato il — Luigi Cavalieri

CharWriter.js: Animazioni Stile "Macchina da Scrivere" in Vanilla JavaScript

Pochi giorni fa ho aperto un repository pubblico su GitHub per condividere del codice JavaScript appena rifattorizzato, oggi mi piacerebbe presentartelo. CharWriter è una modesta classe JavaScript ES6 le cui istanze sono in grado di inserire, cancellare e sostituire del testo contenuto in un tag HTML animando l'operazione in stile "macchina da scrivere".

Spulcia su GitHub

Per rendere l'animazione più realistica, il ritmo di battitura non è così regolare come ci si aspetterebbe da una semplice concatenazione di caratteri, tutt'altro: i caratteri vengono digitati più o meno velocemente in base al loro tipo (maiuscolo, spazio, numero, e così via). Ma devo appuntare che nonostante il mio tentativo di contaminare l'animazione con tratti del fattore umano, la natura dello script è in ogni caso semplice, e in quanto tale questo resta ancorato alla prevedibilità del mondo virtuale.

Type, Delete, ReplaceWith ... Stop

La classe CharWriter include quattro autoesplicativi metodi pubblici:

  • CharWriter::type( text, callback, delay ) — digita nel tag HTML target il valore di text ricevuto in input, eseguendo la callback facoltativa ad animazione terminata. delay è un argomento facoltativo attraverso cui puoi comunicare al metodo dopo quanti millisecondi dal termine dell'animazione deve essere eseguita la callback.
  • CharWriter::delete( callback, delay ) — anima la cancellazione del contenuto testuale del tag HTML target. I due argomenti facoltativi hanno la stessa funzione degli omonomi argomenti del metodo CharWriter::type().
  • CharWriter::replaceWith( text ) — sostituisce il contenuto testuale del tag HTML target con il valore di text ricevuto in input, animando sia l'operazione di cancellazione che quella di inserimento del testo.
  • CharWriter::stop( haltDelay, callback ) — interrompe l'animazione in esecuzione dopo un numero opzionale di millisecondi definito da haltDelay. callback è la funzione facoltativa che deve essere eseguita una volta che l'animazione in corso è stata interrotta.

Un Esempio

Il codice che segue mostra come partendo da un oggetto CharWriter puoi fare in modo che questo prima digiti del testo nel tag HTML target, e successivamente sostituisca il testo digitato quando il tag HTML target viene cliccato:

1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>CharWriter Example</title>
6  <script src="charwriter.js"></script>
7</head>
8
9<body>
10<p id="text"></p>
11
12<script>
13// The animation starts once the document has been fully loaded.
14window.addEventListener( 'load', () => {
15  // CharWriter objects must be inizialised with the ID attribute
16  // of the target HTML tag — 'text' in our example.
17  const writer = new CharWriter( 'text' );
18  
19  // Function called when the target node receives a click event.
20  let startReplacing = ( event ) => {
21    // The 'replaceWith' animation is allowed to be launched only once.
22    event.target.removeEventListener( 'click', startReplacing );
23    
24    writer.replaceWith( 'Lorem ipsum dolor sit amet, 1 Jan 2022, consectetur adipisicing elit ...' );
25  };
26
27  // Function called when the 'type' animation is over.
28  let addClickEvent = () => writer.target.addEventListener( 'click', startReplacing );
29
30  // The 'type' animation starts 1 second after
31  // the document has been fully loaded.
32  setTimeout( () => writer.type( 'Click to replace this text.', addClickEvent ), 1000 );
33} );
34</script>
35</body>
36</html>
TOP