Noi siamo
L’effetto macchina da scrivere è uno degli elementi più dinamici e coinvolgenti che puoi aggiungere al tuo sito web per attirare l’attenzione dei visitatori. Immagina un testo che si svela progressivamente, come se fosse digitato in tempo reale: è un modo semplice ma potente per trasmettere il messaggio chiave del tuo sito in modo accattivante.
In questa guida, ti mostrerò come implementare l’effetto macchina da scrivere utilizzando Typed.js. Vedremo passo per passo come creare un’animazione semplice ma efficace utilizzando un po’ di HTML, CSS e JavaScript. Il risultato sarà un’introduzione che dice “Noi siamo…” con diverse opzioni che appaiono in sequenza, come se fossero digitati su una macchina da scrivere.
Step 1: HTML di Base
Per prima cosa, dobbiamo creare la struttura HTML che conterrà il nostro effetto. Nel nostro caso, creeremo un div con una classe “header” e un tag span con la classe “animate” dove Typed.js applicherà l’effetto macchina da scrivere.
Ecco il codice HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Effetto Macchina da Scrivere con Typed.js</title>
</head>
<body>
<div class="header">
<h2>Noi siamo <span class="animate"></span> </h2>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js" integrity="sha512-3J8teBiHrSyaaRBajZyIEtpDsXdPq1gsznKWIVb5CnorQuFhjWGhWe54z8YNnHHr7MZuExb9m5kvf964HiT1Sw==" crossorigin="anonymous"></script>
</body>
Nel codice HTML abbiamo incluso la libreria Typed.js direttamente da un CDN, che ci permette di utilizzarla senza doverla scaricare localmente.
Step 2: Stile CSS per un Effetto Accattivante
Affinché l’effetto visivo sia più coinvolgente, aggiungiamo del CSS per stilizzare il testo e il background. Vogliamo dare al nostro testo un aspetto visivamente attraente e che ricordi una macchina da scrivere:
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
body {
background-color: #161a1d;
color: #fff;
}
h2 {
color: #fff;
font-size: 5em;
text-align: center;
font-family: 'Bebas Neue', cursive;
letter-spacing: 2px;
text-shadow: 1px 2px white;
}
.animate {
color: #fec89a;
letter-spacing: 2px;
}
- Body: Lo sfondo è scuro per creare un contrasto che mette in risalto il testo.
- H2: La dimensione del testo è volutamente grande per catturare subito l’attenzione, con una font personalizzata (
Bebas Neue) e un effetto di ombra per un impatto visivo maggiore. - Animate: Il testo che appare viene colorato di un arancione chiaro (
#fec89a) per renderlo più attraente.
Step 3: JavaScript per l’Effetto Macchina da Scrivere con Typed.js
Passiamo ora alla parte più interessante: il JavaScript. Utilizziamo Typed.js per creare l’effetto macchina da scrivere.
var typing = new Typed(".animate", {
strings: ['Una community', 'Un blog', 'simpatici'],
typeSpeed: 120,
backSpeed: 70,
loop: true,
});Spiegazione del Codice:
- Typed(“.animate”, options): L’istanza di
Typedviene applicata all’elemento con la classe.animate. - Strings: In questo caso, i valori che vengono digitati sono tre:
"Una community","Un blog", e"simpatici". - typeSpeed: Definisce la velocità con cui i caratteri vengono digitati, in millisecondi.
- backSpeed: Definisce la velocità con cui i caratteri vengono cancellati.
- loop: Se impostato su
true, permette di ripetere l’animazione all’infinito.
Ottimizzazioni e Suggerimenti per Typed.js
Typed.js è perfetto per introdurre il tuo brand, slogan, o servizi principali del tuo sito. È facile da configurare e leggero, il che lo rende adatto anche a progetti che devono essere veloci da caricare. Ecco alcuni suggerimenti per migliorare ulteriormente l’esperienza utente:
- Personalizza le Stringhe: Assicurati che il testo rappresenti il messaggio chiave del tuo brand. È una delle prime cose che gli utenti noteranno.
- Contesto e Contrasto: Il colore del testo dovrebbe risaltare rispetto allo sfondo per garantire una buona leggibilità.
- CTA Integrate: Potresti includere un Call-to-Action subito dopo l’animazione per incentivare l’utente a interagire.
Conclusione
L’Effetto Macchina da Scrivere è un modo fantastico per aggiungere movimento e coinvolgimento al tuo sito web, senza sovraccaricarlo di animazioni complesse. Con Typed.js, puoi creare questo tipo di effetto con poche righe di codice, aggiungendo un tocco personale che può migliorare la User Experience e rendere la tua homepage più attraente.
Typed.js è semplice, leggero, e altamente personalizzabile: perfetto per qualunque tipo di sito, da blog personali a siti aziendali. Usalo per raccontare chi sei, cosa fai e per invitare i tuoi visitatori a scoprire di più su di te!
Hai trovato utile questo Articolo? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.
