/ / Crea una linea strisciante HTML

Crea una linea strisciante HTML

Per creare la linea strisciante HTML hail tag di chiusura <marquee>. Può contenere non solo testo, ma anche altri elementi: tabelle, immagini, moduli e così via. Con l'aiuto degli attributi, non viene specificato solo il movimento orizzontale, ma anche il movimento verticale. Per quest'ultimo è necessario specificare l'altezza del campo.

È interessante notare che inizialmente luiè stato creato per il browser Internet Explorer e altri hanno imparato a capirlo in seguito. Anche se di solito accade il contrario, ed è il browser di Microsoft che agisce sempre come un ritardatario, creando molti problemi ai programmatori.

Codice HTML

rilevanza

<marquee> - Tag di scansione HTML. È supportato da tutte le attuali versioni dei browser. A questo proposito, non ci sono problemi e puoi tranquillamente usarlo.

Tuttavia, da un punto di vista semantico, è deprecato e non è più incluso nella specifica HTML. Pertanto, il codice che include questo tag non verrà convalidato.

Qual è la ragione di ciò? Nell'HTML moderno, non ci sono linee striscianti, poiché tutta l'animazione e lo stile sono eseguiti dai CSS. A volte devi usare anche JS. Di conseguenza, l'HTML è responsabile solo del markup. Tuttavia, <marquee> funzionerà perfettamente, grazie alla sua continua compatibilità con le versioni precedenti.

Sintassi

In HTML, la linea strisciante è impostata dal tag di chiusura:

<marquee> ... </marquee>

All'interno è possibile inserire non solo testo, ma anche altri elementi, ad esempio fotografie o tabelle. Ricorda che sebbene questo codice funzioni, non supererà la validità.

Ticker

Velocità di scorrimento

È possibile controllare lo scorrimento delle righe in HTML utilizzando gli attributi. La velocità di movimento viene impostata tramite l'attributo scrollamount. Sarà simile a questo:

<marquee scrollamount = "1"> del testo </marquee> 

Il cambio di velocità si verifica a causa della costanterimuovere le informazioni sulla posizione del testo e visualizzarle in una nuova posizione. Modificando il valore nell'attributo, impostiamo il numero di pixel tra la vecchia posizione e quella nuova. Di conseguenza, maggiore è il valore, maggiore è la velocità. Questo attributo è supportato da tutti i browser.

Se la velocità di scorrimento è troppo veloce,si attiverà la limitazione automatica per mantenere il testo leggibile. Se è necessario aggirare questa limitazione, immettere l'attributo truespeed. Nota che non tutte le versioni del browser lo capiscono. IE e Firefox possono funzionare con esso.

Il ritardo tra lo scorrimento del testo può essere impostato utilizzando l'attributo scrolldelay.

Casella di scorrimento

In larghezza, il tag occuperà l'intera larghezza del genitoreelemento. E in altezza sarà uguale al contenuto all'interno. Per cambiarlo, devi usare due attributi per l'altezza e la larghezza. Questi sono rispettivamente l'altezza e la larghezza. È possibile utilizzare pixel o percentuali.

Ci sono anche altri due attributi, vale a dire hspace evspace. Sono necessari per creare uno spazio bianco attorno alla linea di scansione, o meglio, al rientro. La distanza viene impostata rispettivamente in orizzontale e in verticale.

Parametri di movimento

Oltre alla velocità, puoi impostare altriparametri di movimento. La direzione del movimento è controllata dall'attributo direction. Per impostazione predefinita, il testo si sposta da destra a sinistra. Questo movimento corrisponde al valore di destra. Per fare in modo che il testo si sposti nella direzione opposta, è sufficiente specificare sinistra e apparirà così:

<marquee direction = "left"> ... </marquee>

Oltre allo scorrimento orizzontale, è possibile specificare lo scorrimento verticale. Usiamo su per spostare il contenuto in alto e in basso per spostarlo in basso.

Per cambiare la natura del movimento, ce ne sono altri dueattributo interessante e utile. È possibile impostare il numero di pergamene dopo il quale il contenuto si fermerà nella sua posizione estrema e non si muoverà. Questa proprietà corrisponde all'attributo loop. L'impostazione predefinita è -1. Se impostato a 0, il testo non si sposterà affatto. I numeri interi superiori a 0 avvieranno il contatore.

L'attributo più voluminoso è il comportamento.È responsabile del modo in cui si muove il contenuto. L'impostazione predefinita è lo scorrimento. Significa che il contenuto si muoverà in una data direzione e, dopo essere stato completamente nascosto, inizierà di nuovo il suo movimento.

Se c'è poco contenuto, puoi impostare l'attributovalore alternativo. Dopo aver raggiunto il punto estremo, il contenuto inizierà a muoversi nella direzione opposta. E così un numero infinito di volte, se il contatore non è impostato.

L'ultimo valore è slide. Indica al contenuto di andare alla fine e fermarsi.

HTML per il markup, CSS per gli stili

stili

Il tag <marquee> include un attributo bgcolor che consente di impostare il colore di sfondo della riga. Per impostazione predefinita, è uguale alla pagina.

L'HTML non è sufficiente per creare una bella linea strisciante. Gli stili devono essere utilizzati. Ad esempio, se vogliamo rendere il testo più bello:

<marquee scrollamount = "1" style = "color: # D9470D; font-size: 40px; spessore del carattere: più audace; line-height: 150%; "> Ticker </marquee>

applicazione

Ci sono molti modi per usare la linea strisciante.Puoi semplicemente usare il testo in esecuzione per attirare l'attenzione. È possibile creare una sorta di informatore che contenga una grande quantità di testo. Puoi anche inserire una serie di immagini che si muovono senza problemi. Questo mostrerà più contenuti.

Una riga in esecuzione nel codice HTML ti aiuterà a creare una semplice animazione se utilizzi un'immagine animata, ad esempio, di una persona che corre.

Non solo il testo è disponibile nella riga di scorrimento

risultati

Abbiamo spiegato come creare una linea strisciante in HTML.Questo è un metodo abbastanza semplice e facile da imparare. Tuttavia, è deprecato e non supera la convalida. Non ho ricevuto ulteriore sviluppo e supporto, che potrebbero causare problemi nel lavoro in browser diversi.

Il CSS è migliore per l'animazione

Si sconsiglia di utilizzarlo.Per creare una linea strisciante, o meglio un'animazione in generale, CSS3 ha una regola @keyframes unica. Ti consente di creare fotogrammi sequenziali di animazione. E la proprietà di animazione determina già la consegna di questa stessa animazione. Questo toolkit fornisce molte più funzionalità rispetto al tag <marquee> precedente. È anche molto più comodo da usare e, cosa più importante, questo è ciò per cui si sono impegnati per molti anni: ripulire l'HTML dalla spazzatura non necessaria e renderlo più leggibile e strutturato.