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.

Ti potrebbero interessare

Server dedicati: cosa sono e come usufruirne nel modo migliore

Cosa sono i Server dedicati

I server dedicati sono uno strumento molto importante per chiunque abbia intenzione di migliorare la propria esperienza su Internet sotto ogni punto di vista. In linea di massima, un server [...]

Hosting per WordPress: di cosa parliamo esattamente?

Ci troviamo davanti ad una precisa terminologia informatica che però, in breve, sta a rappresentare un servizio molto semplice: che tu sia una piccola azienda o un nome già importante sul mercato, hai la possibilità di pubblicizzare e [...]

Cosa serve per aprire un sito WordPress

Prima di poter aprire un sito in WordPress il dubbio che a tutti viene è il suo costo effettivo. Non c’è una reale risposta univoca a questo interrogativo. Sostanzialmente tutto varia in base al tipo di piattaforma che si ha in mente [...]

Cisco
DELL
Intel
NetApp
OnApp
Ripe