Sei qui perché vuoi imparare come creare un testo scorrevole e lampeggiante in HTML, vero? Bene, sei nel posto giusto! In questo articolo ti spiegherò passo passo come ottenere questo effetto accattivante, utilizzando il tag marquee, perfetto per attirare l’attenzione dei visitatori sul tuo sito web.
Ti guiderò a implementare nel tuo sito un testo che scorre da destra a sinistra tramite un codice che combina HTML e CSS necessario per realizzarlo.
Perché creare un testo scorrevole e lampeggiante?
Un testo che si muove o lampeggia è perfetto per:
- Evidenziare offerte speciali
- Promuovere eventi
- Aumentare l’engagement
E poi, siamo onesti: è divertente e dà al tuo sito un tocco vivace! Ma attenzione, non esagerare: un uso eccessivo potrebbe risultare fastidioso per gli utenti. Solitamente uno di questi testi situati sotto il menu, o comunque nell’header del tuo sito è sufficiente.
Esempio codice HTML e CSS per il testo scorrevole e lampeggiante
Ecco il codice completo che puoi utilizzare. Ti consiglio di copiarlo e personalizzarlo secondo le tue esigenze.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testo Scorrevole Continuativo e Lampeggiante</title>
<style>
/* Impostazioni per il corpo della pagina */
body {
margin: 0;
padding: 0;
overflow-x: hidden; /* Impedisce lo scorrimento orizzontale */
}
.marquee {
font-family: 'Poppins', sans-serif;
font-size: 1em; /* Simile a h6 */
font-weight: bold;
color: #ffcc00; /* Colore base giallo */
overflow: hidden;
white-space: nowrap;
position: relative;
background: transparent; /* Sfondo trasparente */
}
.marquee-content {
display: inline-block;
white-space: nowrap;
animation: scroll 20s linear infinite; /* Scorrimento molto lento */
}
.marquee-content a {
color: inherit;
text-decoration: none;
}
.marquee-content span {
display: inline-block;
animation: blink 1.5s ease-in-out infinite; /* Effetto lampeggiante */
}
/* Keyframes per l'animazione di scorrimento */
@keyframes scroll {
0% {
transform: translateX(0); /* Comincia subito da sinistra */
}
100% {
transform: translateX(-100%); /* Finisce fuori schermo a sinistra */
}
}
/* Keyframes per l'animazione lampeggiante */
@keyframes blink {
0%, 100% {
color: #ffcc00; /* Colore giallo */
}
50% {
color: #00ccff; /* Colore azzurro */
}
}
/* Ottimizzazione per dispositivi mobili */
@media (max-width: 600px) {
.marquee {
font-size: 0.9em; /* Riduce la dimensione del testo su dispositivi mobili */
}
.marquee-content {
animation: scroll 60s linear infinite; /* Scorrimento ancora più lento su mobile */
}
}
</style>
</head>
<body>
<div class="marquee">
<div class="marquee-content">
<a href="https://youfriend.it/" target="_blank">
<span>🚀 Vieni a visitare Youfriend.it! </span>
<span>🚀 Vieni a visitare Youfriend.it! </span>
<span>🚀 Vieni a visitare Youfriend.it! </span>
<span>🚀 Vieni a visitare Youfriend.it! </span>
</a>
</div>
</div>
</body>
</html>
Ecco un esempio di come verrà visualizzato:
Come Funziona il Codice
HTML:
La struttura contiene un div principale .marquee e un div interno .marquee-content.
Il contenuto è personalizzabile con link e testo.
CSS:
La classe .marquee gestisce lo stile generale.
La classe .marquee-content include l’animazione per il testo scorrevole.
L’effetto lampeggiante è creato con @keyframes blink.
Ottimizzazione Mobile:
Il testo si riduce e l’animazione rallenta per migliorare l’esperienza utente su dispositivi mobili.
Attributi per personalizzare il testo scorrevole
Se vuoi rendere il tuo testo scorrevole ancora più personalizzato, ecco alcuni attributi utili da aggiungere al tag <marquee>:
- loop: Imposta il numero di volte in cui il marquee scorrerà. Se non viene specificato alcun valore, il valore predefinito è −1, il che significa che il marquee scorrerà in modo continuo..
- behavior: Imposta il modo in cui il testo scorre all’interno del riquadro. I valori sono 3: scroll, slide e alternate. Se non viene specificato alcun valore, il predefinito è scroll:
scroll: il testo scorre fino ad uscire dal box e riapparire dal lato opposto (valore di default).slide: il testo raggiunge la fine della casella, scompare “di colpo” e ricomincia.alternate: il testo “rimbalza” come fosse una pallina tra i margini del box di testo, senza mai uscire.
- scrollamount: imposta la quantità di pixel per far avanzare il testo; maggiore è il numero, più veloce sarà lo spostamento. Il valore predefinito è 6
- scrolldelay: Imposta l’intervallo tra ogni movimento di scorrimento in millisecondi. Il valore predefinito è 85. Nota che qualsiasi valore inferiore a 60 viene ignorato e al suo posto viene utilizzato il valore 60
- direction: direzione per lo scorrimento del testo; puoi scegliere tra
up,down,left, eright. - height e width: rispettivamente altezza e larghezza in pixel o percentuale.
- align: allineamento dello scroller.
Esempio testo scorrevole con Javascript semplice
Con un poco di zucchero, chiamato Javascript, al tag <marquee>, puoi creare un testo che si ferma al passaggio del mouse e riprende a scorrere quando il mouse si allontana:
<marquee
onmouseover="this.stop()"
onmouseout="this.start()"
behavior="scroll"
direction="left"
scrollamount="5">
<p><h2><strong style="color:blue;">Questo è un testo scorrevole personalizzato!</strong></h2></p>
</marquee>FAQ sul Testo Scorrevole e Lampeggiante
1. Posso modificare la velocità dello scorrimento?
Sì, certo! Nel codice CSS, modifica il valore 20s nell’animazione scroll. Ad esempio:
10s: più veloce30s: più lento
2. Come cambio i colori del lampeggiamento?
Nel codice CSS, sostituisci i valori #ffcc00 e #00ccff nei @keyframes blink con i tuoi colori preferiti.
3. Il testo scorre anche su smartphone?
Sì! Grazie alla media query @media, il testo è ottimizzato per i dispositivi mobili.
4. Posso usare questo codice su WordPress?
Certamente! Incolla il codice HTML nella modalità “Testo” del tuo editor WordPress.
5. Questo effetto rallenta il mio sito?
No, è molto leggero. Tuttavia, evita di usarlo su pagine con troppi altri elementi animati.
Conclusione
Ora che sai come creare un testo scorrevole e lampeggiante in HTML, sei pronto per aggiungere un tocco dinamico al tuo sito web. Ricorda: la creatività è il limite, ma non dimenticare di mettere sempre l’utente al centro della tua esperienza online.
Che aspetti? Prova subito il codice e fammi sapere nei commenti come lo hai personalizzato! 🚀
