Effetto macchina da scrivere con TypeWriterJS
Il sito ha subito un restyling ed in homepage non è più presente l’effetto in questione. La guida però è ancora valida!
Hai notato l’effetto “macchina da scrivere” in homepage? Davvero carino non trovi?
Oggi ti faccio vedere i passaggi che ho seguito per integrarlo nel mio sito Hugo e anche un trucchetto che mi consente di aggiornare facilmente i testi che, in loop, appaiono nell’animazione.
La libreria Javascript che ho usato è TypeWriterJS. Davvero ben fatta e molto semplice da usare.
Iniziamo!
Innanzitutto scarica la libreria da
qui.
Spostala nella cartella static del tuo progetto Hugo.
Ora devi cercare nei file del tuo template la pagina index, nel mio caso si trova in layouts/index.html. Trovato?
Bene, aprilo e prima della chiusura nel tag body inserisci il tag di inclusione della libreria.
<script src="/core.js"></script>
Subito dopo apri un altro tag <script> con all’interno le configurazioni.
Ti riporto qui l’esempio di codice, che è presente anche nel link della libreria:
new Typewriter('#typewriter', {
strings: ['Hello', 'World'],
autoStart: true,
});
Io ho aggiunto anche il parametro loop: true, che crea un loop infinito sulle stringhe presenti nell’array strings.
new Typewriter('#typewriter', {
strings: ['Hello', 'World'],
autoStart: true,
loop: true,
});
Analizziamo un attimo insieme la situazione. Il mio file index.html più o meno ha questa struttura:
<html>
<head>
...
</head>
<body>
...
<div class="about_right">
<h1></h1>
</div>
...
<script src="/core.js"></script>
<script>
new Typewriter('.about_right h1', {
strings: [
'Python', 'Django', 'Netflix addicted',
'Curioso', 'Pilota di droni', 'Sviluppo mobile',
'Kotlin', 'Blogger provetto :) ', 'Sviluppo Web',
'Debian user', 'Java', 'Wordpress',
],
autoStart: true,
loop: true,
});
</script>
</body>
</html>
Il primo parametro che ho passato alla classe Typewriter è il mio css path.
Abbiamo ottenuto il risultato. Il codice che ti ho indicato funziona, la libreria è inclusa e configurata correttamente. Semplice non trovi?
Apportiamo qualche piccola modifica
Possiamo fare di più, 2 cose in particolare: la prima è per comodità e semplicità di aggiornamento, l’altra è una piccola ottimizzazione per non appesantire il sito.
Vediamole in ordine.
Ho modificato lo script di configurazione in questo modo:
<script>
new Typewriter('.about_right h1', {
strings: {{ .Site.Params.typewriter }},
autoStart: true,
loop: true,
});
</script>
nota come ho cambiato il parametro strings.
Questo invece è un nuovo parametro che ho inserito nel file config.toml:
[params]
typewriter = [
'Python', 'Django', 'Netflix addicted',
'Curioso', 'Pilota di droni', 'Sviluppo mobile',
'Kotlin', 'Blogger provetto :) ', 'Sviluppo Web',
'Debian user', 'Java', 'Wordpress',
]
Con queste due piccole modifiche, se voglio aggiungere o modificare qualche frase in homepage non devo andarmi a
cercare il file index.html ogni volta, mi basta aprire il file config.toml di Hugo che è un attimino più
a portata di mano.
Ora vediamo la parte di ottimizzazione.
<script src="/core.js" async></script>
<script>
function createTypeWriterText() {
try {
new Typewriter('.about_right h1', {
strings: {{ .Site.Params.typewriter }},
autoStart: true,
loop: true,
});
} catch(e) {
setTimeout(createTypeWriterText, 500);
}
}
createTypeWriterText();
</script>
Ho aggiunto l’attributo async quando includo TypeWriterJs, serve a far scaricare al browser la libreria in
modo asincrono, cioè senza bloccare il download del resto della pagina html. In pratica il browser scarica le
risorse in parallelo ed è utile per ottimizzare la velocità di caricamento del sito.
Nel secondo tag script ho creato una funzione function createTypeWriterText() e la invoco.
All’interno di questa funzione tento di configurare Typewriter, ma, visto che l’ho inclusa con l’attributo async,
potrebbe capitare che il download della libreria non sia ancora completo nel momento in cui il browser
richiama createTypeWriterText().
Se è questo il caso, catturo l’eccezione e all’interno del blocco catch aspetto 500 millisecondi per poi richiamare di nuovo la stessa funzione.
Spero di essere stato chiaro e che anche tu sia riuscito a creare il tuo effetto macchina da scrivere. Se hai dubbi o vuoi un chiarimento scrivimi nei commenti o contattami sui social.
A presto 👋
AP