Quasi ogni pagina di notizie, e di conseguenza anche molti blog, stuzzicano la curiosità del lettore con un roller a scorrimento verticale, ovvero un piccolo box dove far scorrere, di solito dal basso verso l'alto, titoli di notizie, anteprime o link ad altre pagine. Oggi vedremo come realizzare un roller di questo tipo usando il buon vecchio JavaScript per sfruttare alcune proprietà CSS orientate all'animazione, come anticipato in questa guida. Il codice sarà diviso in due parti: la sezione da includere nella pagina HTML dov'è posizionato il roller, e la piccola libreria JavaScript di supporto.
Iniziamo dalla pagina HTML: qui definiamo, all'interno della variabile content, il testo da definire nel roller, subito prima di includere lo script dell'animazione, ad esempio:
<script>
var content = '<strong>Sample bold title.</strong><br/><br/>'
+ 'Sample text for the first line.</span>' ;
</script>
<script src="roller.js"></script>
<script>window.onload = initScroller(200,10, 300,80, 10);</script>
La libreria roller.js è il cuore vero e proprio del roller verticale. Creiamola partendo da un nuovo file di testo (vuoto), al cui interno avremo due funzioni. La prima funzione avrà nome initScroller() e si occuperà di creare gli elementi HTML necessari (due div nidificati), inizializzare le variabili e far partire l'animazione, usando l'istruzione JavaScript setInterval (per un'introduzione all'uso di setInterval vedi questo articolo). In cima alla libreria definiamo le variabili globali condivise dalle due funzioni
var inner ; // Id of the inner division
var outer_height ; // Height of the outer division
var content_h ; // Actual height of the inner division (content)
Subito dopo definiamo la funzione che si occuperà di eseguire lo scrolling vero e proprio del div contenente il testo da animare.
function scroll(step){
inner.style.top = (parseInt(inner.style.top)-step) + 'px';
if (parseInt(inner.style.top) < 3-content_h)
inner.style.top = outer_height + 3 + 'px';
}
La funzione è molto semplice. Una volta assunto che da qualche parte è definito un elemento HTML (nel nostro caso il div interno) riferito dalla variabile inner, l'animazione non fa altro che “steppare” il movimento, aggiornando la proprietà CSS top dell'elemento, e controllare la condizione di fine animazione. Quando il contenuto è uscito verso l'alto, al termine dello scorrimento, la condizione if qui sopra è soddisfatta: per ripetere l'animazione da capo basta resettare il valore della proprietà top (qui sopra usiamo un margine di 3px per rendere meno brusco il passaggio).
A questo punto manca solo l'inizializzazione delle variabili e degli elementi HTML. Questo può essere fatto in modi diversi: potremmo definire i div necessari come HTML nudo e crudo, oppure delegare a JavaScript il compito di creare gli elementi stessi. Quest'ultima soluzione è più vantaggiosa, perché incoraggia il riutilizzo del codice. Ecco perché la funzione di inizializzazione è la parte più corposa della libreria: la funzione initScroller si occupa anche di produrre l'HTML del caso, e questo richiede qualche riga di codice extra
function initScroller(pos_x, pos_y, box_w, box_h, innerMargin) {
var boxcolor = "#FFFFFF" ;
var innercolor = "#FFFFFF" ;
// 1. Producing HTML
var outerDiv = '<div id="outer" style="position:relative; width:' + box_w + 'px; height:' + box_h + 'px; visibility:visible; left:' + pos_x + 'px; top:' + pos_y + 'px; background-color:' + boxcolor + '; overflow:hidden;" >';
var innerDiv = '<div id="inner" style="background-color:' + innercolor + '; position:absolute; visibility:hidden; left:' + innerMargin + 'px; width:' + (box_w - 2*innerMargin) + 'px; overflow:hidden; cursor:default;">' + content + '</div></div>' ;
document.write(outerDiv + innerDiv);
// 2. Setting global variables (used by the scroll() function)
outer_height = box_h ;
inner = document.getElementById('inner');
content_h = inner.offsetHeight ;
// 3. Initializing scrolling box
inner.style.top = (box_h - 2) + 'px' ;
inner.style.clip = 'rect(0px, ' + (box_w - 4) + 'px, ' + content_h + 'px, 0px)' ;
inner.style.visibility = 'visible' ;
setInterval('scroll(1)', 50) ;
}
Il risultato è una libreria versatile, che permette di specificare tutti i parametri al momento della chiamata a initScroller, come visto all'inizio. L'unico parametro che abbiamo “cablato”, per non complicare troppo le cose, è la velocità di scorrimento, definita dal ritardo di 50ms nell'invocazione della setInterval. Se vogliamo un'animazione più lenta aumentiamo questo numero, se la vogliamo più veloce possiamo ridurlo di qualche decina: ma 50 ms dovrebbero andare bene, perché corrispondono proprio alla velocità di scorrimento abituale dei roller sul web.
