Tra gli effetti visivi più apprezzati nel web design, l'effetto typewriter – o effetto macchina da scrivere – è uno dei più semplici ma anche dei più accattivanti. Questo tipo di animazione simula la digitazione automatica di un testo, lettera per lettera, conferendo al contenuto un tocco dinamico e coinvolgente. Viene spesso utilizzato negli hero banner, nelle landing page o nei siti one-page per catturare l'attenzione dell'utente fin da subito, guidandolo verso il messaggio principale in modo elegante e moderno.
Testo con effetto Typewriter (scrittura automatica stile macchina da scrivere) con HTML, CSS e JS
In questo tutorial verrà spiegato passo dopo passo come realizzare questo effetto utilizzando HTML, CSS e JavaScript puro. Senza l'ausilio di librerie esterne verrà creata una struttura semplice con uno stile pulito e uno script in grado di riprodurre l'effetto in modo fluido e professionale.
Cosa serve per creare l'effetto Typewriter
Per realizzare l'effetto typewriter verranno usate tre tecnologie fondamentali del web: HTML, CSS e JavaScript.
L'HTML servirà per definire la struttura base della pagina e inserire l'elemento che conterrà il testo animato. CSS aiuterà a dare uno stile accattivante al contenuto, rendendo l'effetto visivamente gradevole e coerente con il design della pagina. JavaScript, infine, sarà il cuore pulsante dell'animazione: grazie a una funzione che aggiunge le lettere una alla volta, simulerà la digitazione di un messaggio in tempo reale.
Il vantaggio di questo approccio è che non ci sarà bisogno di alcun framework o plugin esterno: tutto sarà realizzato con codice nativo, facilmente personalizzabile e integrabile in qualsiasi progetto. Iniziamo dal codice HTML:
<div class="typewriter-container">
<h1 id="typewriter"></h1>
</div>Questo codice è molto semplice, con una struttura di base che include solo gli elementi essenziali per l'effetto typewriter. C'è un contenitore per il testo animato e un tag <h1>
Adesso proseguiamo con il codice CSS
body {
font-family: 'Courier New', Courier, monospace;
background-color: #222;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.typewriter-container {
text-align: center;
}
#typewriter {
display: inline-block;
border-right: 3px solid #fff;
padding-right: 5px;
font-size: 2rem;
white-space: nowrap;
overflow: hidden;
}Il codice mostrato permette di impostare uno sfondo scuro con testo bianco e utilizza un font monospace per simulare la macchina da scrivere. Il layout è centrato sia orizzontalmente che verticalmente. Il testo ha poi un cursore lampeggiante creato con un bordo destro e il contenitore del testo è centrato. Inoltre, viene impedito il ritorno a capo del testo, creando l'illusione di una digitazione continua. Questo stile garantisce un contrasto visivo ottimale e un aspetto pulito.
Infine, la parte di codice JavaScript:
const text = "Ciao! Benvenuto nel mio sito.";
const speed = 100;
let i = 0;
const element = document.getElementById("typewriter");
function typeWriter() {
if (i < text.length) {
element.innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
window.onload = typeWriter;Il codice JavaScript gestisce l'animazione della digitazione del testo. Viene definito un testo da "digitare" e la velocità di digitazione (in millisecondi) per ogni carattere. La funzione typeWriter()
typewriter
setTimeout()
window.onload
Anteprima del risultato finale
Il codice appena visto combina HTML, CSS e JavaScript per creare l'effetto di una digitazione automatica simile a quella di una macchina da scrivere. Con HTML e CSS, è stato possibile strutturare e stilizzare il contenitore del testo, mentre JavaScript si è occupato di aggiungere i caratteri uno alla volta, creando l'animazione.
Ora che abbiamo visto il funzionamento del codice, di seguito puoi osservare il risultato finale in azione attraverso una GIF che mostra l'effetto typewriter in tempo reale.
Conclusione
In questo tutorial abbiamo imparato a creare un semplice ma affascinante effetto typewriter utilizzando HTML, CSS e JavaScript. Abbiamo visto come definire una struttura minimale con HTML, aggiungere stili per renderla visivamente interessante con CSS, e infine animare il testo con JavaScript per simulare la digitazione automatica. Questo effetto può essere facilmente personalizzato sia nel contenuto che nell'aspetto e può essere integrato in vari progetti web per aggiungere un tocco dinamico e accattivante.
Spero che questo tutorial ti sia stato utile e ti inviti a sperimentare ulteriormente con diverse variazioni di velocità, font e colori. Buon coding!
