Come Visualizzare un Testo Lampeggiante in HTML

Co-redatto da Lo Staff di wikiHow

La visualizzazione del testo lampeggiante non è una funzione nativa del codice HTML e non c'è un metodo che consenta di ottenere questo effetto visivo su tutti i browser in commercio. L'opzione più semplice che include l'uso di codice HTML puro consiste nello sfruttare il tag "<marquee>", ma questa soluzione non funziona se si utilizza Google Chrome. Usare i JavaScript è un metodo che dà risultati più affidabili e ti consente di copiare e incollare il codice direttamente all'interno del tuo documento HTML.

Metodo 1

Metodo 1 di 2:

Usare il Tag Marquee

1
Usa questo approccio solo per i progetti personali. Il tag <marquee> è un comando obsoleto e gli sviluppatori sono fortemente incoraggiati a non utilizzarlo all'interno dei loro lavori. Ogni browser interpreta questo tag in modo diverso e i futuri aggiornamenti software potrebbero abbandonare del tutto questo comando, rendendo inefficace la soluzione proposta in questo metodo dell'articolo.^{[1]
X
Fonte di ricerca}^{[2]
X
Fonte di ricerca}. Se devi creare un sito web professionale, prova a usare i Javascript.
- Google Chrome non supporta l'attributo "scrollamount" del tag "<marquee>" su cui è basata la soluzione descritta in questo metodo.^{[3]
  X
  Fonte di ricerca} In questo scenario, il testo scorrerà lungo la pagina anziché lampeggiare.
2
Racchiudi il testo che deve essere lampeggiare all'interno dei tag "<marquee>". Apri il file HTML utilizzando un semplice editor di testo. Inserisci il codice <marquee> come prefisso del testo che vuoi far lampeggiare, dopodiché aggiungi il tag </marquee> alla fine della frase o del paragrafo.
- Ricorda che il codice HTML della pagina deve essere formattato correttamente e deve includere le sezioni <html>, <head> e <body>.
3
Imposta la larghezza della sezione del testo che deve lampeggiare. Modifica il tag "<marquee>" di apertura nel seguente modo <marquee width="300">. In questo caso, non verrà modificata la dimensione dei caratteri. Ci sono due motivi per cui devi eseguire questa modifica:
- Se il testo non viene visualizzato interamente all'interno della sezione della pagina corrispondente, anziché lampeggiare scorrerà da destra a sinistra. Aumentando la larghezza della sezione utilizzando l'attributo "width" risolverai questo problema.
- Usando Google Chrome il testo scorrerà all'interno di una sezione che avrà come dimensione il valore indicato dall'attributo "width".
4
Imposta il valore dell'attributo "scrollamount" con lo stesso numero che hai assegnato al parametro "width". Aggiungi il codice scrollamount="300" (o il medesimo valore che hai assegnato all'attributo "width") all'interno del tag "<marquee>". Per impostazione predefinita, il tag "< marquee>" utilizza tutta l'ampiezza della pagina per fare scorrere il testo. Impostando il valore del parametro "scrollamount" con lo stesso dell'attributo "width", forzerai il testo a scorrere nella medesima posizione in cui viene visualizzato. Il risultato di questa impostazioni è un effetto lampeggiante del testo.
- Il codice HTML a questo punto dovrebbe essere il seguente:
  <marquee width="300" scrollamount="300">Testo lampeggiante.</marquee>.
5
Modifica l'attributo "scrolldelay". Apri il file HTML che hai modificato all'interno di un browser internet per visualizzare l'effetto lampeggiante del testo che hai appena creato. Se il testo lampeggia troppo velocemente o troppo lentamente, puoi variare la velocità dell'effetto grafico aggiungendo l'attributo scrolldelay="500". Il valore predefinito è 85.^{[4]
X
Fonte di ricerca} Imposta un numero più elevato se vuoi ridurre la velocità a cui lampeggia il testo oppure usa un numero più basso per velocizzarlo.
- A questo punto il codice HTML dovrebbe avere più o meno questo aspetto:
  <marquee width="300" scrollamount="300" scrolldelay="500">Testo lampeggiante.</marquee>
6
Limita il numero di lampeggiamenti del testo (opzionale). Molti utenti che navigano abitualmente nel web trovano che l'effetto lampeggiante del testo sia fastidioso e irritante. Per interrompere l'animazione del testo dopo aver attirato l'attenzione del lettore, puoi aggiungere l'attributo loop="7". In questo modo il testo lampeggerà per sette volte, dopodiché scomparirà dalla vista (in base alle tue necessità puoi utilizzare un numero di ripetizioni diverso da sette).
- Il codice HTML completo è il seguente:
  <marquee width="300" scrollamount="300" scrolldelay="500" loop="7">Testo lampeggiante.</marquee>
Pubblicità

Metodo 2

Metodo 2 di 2:

Usare un JavaScript

1
Inserisci lo script che gestisce il lampeggiamento del testo all'interno della sezione "head" del codice HTML della pagina. Inserisci il seguente JavaScript all'interno dei tag <head> e </head> del file HTML che stai modificando:^{[5]
X
Fonte di ricerca}
- function blinktext() {
    var f = document.getElementById('announcement');
    setInterval(function() {
      f.style.visibility = (f.style.visibility == 'hidden' ? '' : 'hidden');
    }, 1000);
  }
2
Inserisci il comando per caricare lo script all'interno della pagina. Il codice fornito nel passaggio precedente serve per dichiarare la funzione "blinktext" che gestirà l'effetto grafico del testo. Per poterla utilizzare all'interno del tuo codice HTML, occorre modificare il tag <body> nel seguente modo <body onload="blinktext();">.
3
Assegna l'identificativo "announcement" alla sezione di testo che vuoi rendere lampeggiante. Lo script che hai creato nei passaggi precedenti ha effetto solo sugli elementi che hanno l'etichetta "announcement". Inserisci il testo che vuoi far visualizzare con l'effetto lampeggiante all'interno di un qualsiasi elemento della pagina a cui poi assegnerai l'id "announcement". Per esempio <p id="announcement">Testo lampeggiante.</p> oppure <div id="announcement">Testo lampeggiante.</div>.
- Puoi assegnare all'attributo "id" un nome qualsiasi, l'importante è che poi venga riportato anche all'interno dello script come id dell'elemento da gestire.
4
Modifica le impostazioni dello script. Il valore "1000" riportato nello script rappresenta la velocità alla quale il testo lampeggia. Si tratta di un parametro espresso in millisecondi, quindi impostandolo sul valore "1000" significa che il testo lampeggerà una volta al secondo.^{[6]
X
Fonte di ricerca} Diminuisci tale valore se vuoi incrementare la velocità del lampeggiamento oppure aumentalo se vuoi diminuire la velocità dell'effetto grafico.
- È molto probabile che la velocità reale a cui il testo lampeggerà non coincida perfettamente con il valore impostato. Normalmente l'effetto tende a essere leggermente più veloce, ma se il browser sta eseguendo altre operazioni potrebbe risultare più lento.
Pubblicità

Consigli

Puoi modificare l'aspetto del testo visualizzato con il tag "<marquee>" usando l'attributo "style". Prova a utilizzare il codice style="border:solid".
Puoi aggiungere l'attributo "height" al tag "<marquee>" e anche l'attributo "width", ma è bene precisare che alcuni browser ignoreranno tali comandi.^{[7]
X
Fonte di ricerca} Se hai aggiunto un bordo al testo del tag "<marquee>", potresti notare una differenza nell'aspetto.
Per fare in modo che il testo venga visualizzato lampeggiante, puoi sfruttare le animazioni messe a disposizione dei fogli di stile CSS. Si tratta tuttavia di un approccio molto complicato, che non è consigliato se non hai una grande esperienza nell'uso dei CSS. Ricorda che dovrai utilizzare un foglio CSS esterno, dato che Firefox non supporta i comandi delle animazioni del codice CSS inseriti direttamente nel codice HTML della pagina.^{[8]
X
Fonte di ricerca}

Avvertenze

Non utilizzare il tag <blink> o l'effetto del testo disponibile nel foglio CSS, dato che sono pochissimi i browser moderni in grado di supportare questo comando.^{[9]
X
Fonte di ricerca}^{[10]
X
Fonte di ricerca}