Scrolling di testo (tipo news) solo HTML? Si può!

Dopo anni il codice HTML continua a stupirmi! Degni del fatto che non si smette mai di imparare.

Avevo bisogno di fare uno scrolling di bandiere orizzontale. Cercando per mille e mille siti una soluzione jQuery relativamente semplice, possibilmente senza il download di script, mi viene in mente di togliere la parola jQuery e news dalla ricerca (news poiché di solito sono quelle che necessitano uno scrolling infinito e continuo). Al primo colpo trovo un forum/blog importante nella quale un utente ne aiuta un altro consigliandogli un codice marquee jQuery. Non capendo cosa fosse ho cercato per un pò informazioni e ho capito che lo script jQuery serve solo per migliorare quello che già HTML offre: il tag MARQUEE!

Tale tag offre lo scrolling di qualsiasi cosa ci sia all’interno: testo, immagini… tutto quello di cui avete bisogno (o almeno gran parte). Ci sono vari esempi, come ad esempio questoquesto e molti altri, basterà scrivere su google: esempi marquee html . Troverete molti utilizzi, come ad esempio lo scrolling verticale, quello orizzontale, loop infiniti e via discorrendo. Qualche esempio lo posto anch’io, anche se non si potrà vedere l’animazione (restrizioni WordPress):

Il testo comparirà da destra e si fermerà a sinistra (no loop)
<marquee align="middle" behavior="slide" direction="left" scrollamount="5">Il vostro testo qui</marquee>

Il testo comparirà da destra, scomparirà a sinistra e ricomparirà a destra (loop infinito)
<marquee align="middle" behavior="scroll" direction="left" scrollamount="5">Il vostro testo qui</marquee>

Il testo comparirà dall'alto, scomparendo in basso e ricomincerà (loop con scrolling verticale)
<marquee align="middle" scrollamount="1" height="100" width="100%" direction="down" scrollamount="10">Il vostro testo qui</marquee>

Questi sono solo tre delle centinaia di possibilità che avrete con questo tag. Per inserire immagini e link… beh, pensate che sia un div o un p qualsiasi e cambiate “Il vostro testo qui” con qualsiasi cosa abbiate in mente (nel mio caso bandiere con link).

Intuitivo e rapido, possiamo dire che con il parametro ‘behavior’ diciamo cosa vogliamo che succeda (scroll, slide, alternate), con ‘direction’ la direzione (left, right, up, down) e con ‘scollamount’ la velocità di scorrimento (pixel al secondo, più alto il numero e il movimento sarà più veloce).

C’è un piccolo intoppo che non molti vi dicono: come stoppare lo scroll al passaggio del mouse e farlo ripartire quando il mouse si sposta? Beh, semplice e indolore, grazie a javascript (nulla di complicato, tranquilli).

Dobbiamo aggiungere due parametri al nostro tag marquee: onmouseover e onmouseout, rispettivamente mouse sopra e mouse fuori, attribuendogli due valori, rispettivamente: this.stop() e this.start():

(Separato in più righe per miglior visibilità)

<marquee align="middle" behavior="scroll" 
direction="left" scrolldelay="5" onmouseover="this.stop()"
onmouseout="this.start()">Il vostro testo qui</marquee>

Con quest’ultimo codice avrete uno scrolling orizzontale infinito con pausa al passaggio del mouse, tutto senza jQuery!

Funziona, testato, su safari 5.x (ma sicuramente dalla 4.x o prima), firefox 5.x (anche questo dalla 4.x o prima) ed Internet Explorer 8 (non assicuro nulla per la 7, ovviamente).

Fatemi sapere se vi funziona o se avete dubbi.

Annunci

, , , , , , , , , , , ,

  1. Lascia un commento

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: