Funzionalità
Lo script pubblicato in questa guida permette di emulare l'ormai deprecato
marquee, consentendovi quindi di inserire nei vostri forum testi o immagini scorrevoli compatibili con tutti i browser, ed è utilizzabile sia per l'inserimento in codice HTML che nei messaggi,
non va utilizzato per inserire testi o immagini scorrevoli nelle firme, come nel tag marquee, con lo script lo scorrimento è completamente personalizzabile, sia come direzione che come velocità.
Installazione
Per poter utilizzare i marquee, per prima cosa inserite questo script
HTML
<script type="text/javascript" src="http://nb.forumfree.it/scripts/ace/marquee.js"></script>
in Codice HTML, nel box
Codice HTML che sarà mostrato in FONDO a tutte le pagine (Per velocizzare il caricamento il codice può esser anche inserito
immediatamente dopo l'ultimo marquee.
Quelli inseriti dopo il codice non funzioneranno.), poi inserite, in colori e stili, questo CSS (senza modificarlo)
HTML
.marquee {overflow: hidden}
.marquee > div {position: relative; display: inline-block; top: -9999px; left: -9999px}
.marquee:not([data-direction="up"]):not([data-direction="down"]) > div {position: absolute; white-space: nowrap; top: -9999px; left: -9999px}
infine, il codice per realizzare il contenuto scorrevole, che potete utilizzare in Codice HTML o nei post, è questo
HTML
<div class="marquee"><div> CONTENUTO </div></div>
i vostri contenuti, che si tratti di testi, di immagini, di minibanner, eccetra, vanno inseriti al posto della parola
CONTENUTO, di default scorrerà verso destra con velocità
2 e non si fermerà al passaggio del mouse.
Al div con classe
marquee è possibile assegnare opzionalmente degli attributi che modificheranno lo scorrimento del contenuto:
-
data-speed, per settare la velocità. Ammette valori da
1 (più lento) a
10 (più veloce). Esempio:
data-speed="3". (se non specificato, la velocità sarà 2)
-
data-direction, per settare la direzione. Ammette valori
up per scorrere verso l'alto,
down pre scorrere verso il basso,
left per scorrere verso sinistra,
right per scorrere verso destra. Esempio:
data-direction="left". (se non specificato, il contenuto scorrerà verso destra)
-
data-hover, per settare il comportamento al passaggio del mouse. Ammette i valori
slow per rallentare al passaggio del mouse,
fast per velocizzare al passaggio del mouse,
pause per fermarsi al passaggio del mouse. Esempio:
data-hover="fast" (questo attributo è opzionale).
Un esempio di marquee modificato è:
HTML
<div class="marquee" data-hover="fast" data-direction="left"><div>Lorem ipsum dolor sit amet.</div></div>
Personalizzazione
E' possibile modificare l'aspetto e le dimensioni (larghezza e/o altezza) del marquee, o inserendo degli stili in linea al div con classe marquee, esempio
HTML
<div class="marquee" style="width: 600px"><div> CONTENUTO </div></div>
oppure agendo da colori e stili inserendo un id al suddetto div, esempio
HTML
<div class="marquee" id="tuo_id"><div> CONTENUTO </div></div>
e aggiungendo in colori e stili
CODICE
#tuo_id > div {attributi}
(questi due metodi consentono di personalizzare separatamente i marquee, se ne avete più di uno) oppure ancora aggiungendo, senza rimuovere quindi marquee, una classe aggiuntiva, esempio
HTML
<div class="marquee tua_classe"><div> CONTENUTO </div></div>
e in colori e stili
CODICE
.tua_classe > div {attributi}
usando il metodo della seconda classe potrete attribuire, con una sola riga di CSS, le stesse personalizzazioni a tutti i div marquee a cui aggiungerete a quella classe.
Edited by A c e - 14/2/2015, 12:23
