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 questo, questo 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

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 )

Google+ photo

Stai commentando usando il tuo account Google+. 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 )

w

Connessione a %s...