Attendi ...

Un roller a scorrimento verticale in JavaScript

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.

07.06.2012

Ti potrebbero interessare

WordPress: aggiornarlo è fondamentale per Sicurezza e Prestazioni

Aggiornare WordPress è fondamentale

Mantenere sempre aggiornato il proprio sito web WordPress è di fondamentale importanza per diversi motivi:

Sicurezza: le versioni più recenti di WordPress spesso includono correzioni di sicurezza per vulnerabilità che sono state scoperte nelle versioni precedenti. Mantenere il software aggiornato aiuta a proteggere il tuo sito da minacce di sicurezza e a prevenire potenziali [...]
26.01.2024
Dettagli

Indirizzo Email e Sito Internet personali

Il potere di Indirizzo Email e Sito Internet Personali

L'importanza, anche per una persona di avere un indirizzo email e un sito internet con il proprio nome

Viviamo in un'era digitale in cui la presenza online è diventata essenziale per connettersi con il mondo circostante. Uno degli strumenti fondamentali per affermare la propria identità digitale è rappresentato dall'indirizzo email e dal sito internet [...]

10.01.2024
Dettagli

PHP 8.3 disponibile sui nostri piani

A partire dal mese di Dicembre abbiamo iniziato ad introdurre su tutti i nostri servizi di Hosting Linux, Hosting WordPress, Hosting Multidominio e Cloud Hosting, la possibilità di utilizzare anche l'ultima versione stabile di PHP 8.3.

Come di consueto, dal proprio pannello di amministrazione è possibile modificare in autonomia la versione di PHP utilizzata per il proprio dominio o [...]

01.12.2023
Dettagli