Scrollorama e Scrolldeck sono due plugin basati su jQuery. Scrollorama, la libreria principale, consente di generare animazioni e vari effetti di transizione allo scorrimento della pagina, Scrolldeck, estensione dipendente dal precedente script, rappresenta l'ideale per la creazione di presentazioni e pagine web a scorrimento verticale.
Il funzionamento di entrambi i plugin è basato sullo stesso presupposto: sulla divisione degli elementi delle pagina in diversi blocchi di uguale altezza, animati dallo scrolling dell'utente in base alla posizione della finestra del browser.
Per quanto riguarda la compatibilità, sono supportati Internet Explorer 8 e 9 e le versioni più recenti di Safari, Chrome, Firefox ed Opera.
Vediamo subito come utilizzare Scrollorama e Scrolldeck per realizzare una semplice pagina animata e navigabile verticalmente: ovviamente, la prima cosa da fare è includere nel documento HTML il framework jQuery e il resto dei file Javascript necessari: jQuery Easing, Scrollorama, Scrolldeck e jQuery ScrollTo.
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.scrollorama.js"></script>
<script type="text/javascript" src="js/jquery.scrolldeck.js"></script>Il markup HTML necessario è molto semplice e prevede di dividere la pagina in diverse slide di default rappresentate da un div.slide che si susseguono con ritmo verticale.
Per assicurare la migliore fruibilità del layout, con ogni dispositivo e a qualunque risoluzione, viene sfruttato il dimensionamento dei caratteri in REM, una nuova unità di misura introdotta con i CSS3, insieme alle media queries; come è possibile verificare effettuando il resize della pagina dell'esempio, il testo si adatta elasticamente alle dimensioni della finestra del browser, consentendo una resa grafica ottimale.
Grazie a Scrollorama è possibile animare a piacimento gli elementi testuali o grafici contenuti in ognuna delle slide, mentre con Scrolldeck è assicurata la navigabilità tra le slide grazie al supporto dei tasti dx/sx sulla tastiera. Nell'esempio di questo articolo è stato inserito anche un menu di navigazione, opzionalmente utilizzabile: in questo caso è necessario che i collegamenti del menu puntino sull'attributo id delle rispettive slide.
Iniziamo ad analizzare il codice Javascript necessario ad inizializzare Scrolldeck. L'istanza del plugin accetta un argomento che può contenere un'hash di parametri opzionali di configurazione, ad esempio per identificare attraverso i selettori CSS il menu di navigazione e le slide del documento.
$().ready(function() {
var deck = new $.scrolldeck({
buttons: '.nav-button',
slides: '.slide',
easing: 'easeInOutExpo'
});
// il resto del codice...
});Fatto questo, è possibile aggiungere un buon numero di effetti personalizzabili ai vari elementi contenuti nelle slide, come blocchi di testo e immagini. Basta intervenire direttamente nel codice HTML assegnando delle opportune classi CSS agli elementi voluti: animate-in e animate-build, che consente di bloccare la posizione di un elemento fino alla fine dell'animazione.
Non solo, l'attributo data-animation permette di segliere tra quattro diversi tipi di transizione tutti da esplorare: fly-in-left, fly-in-right, space-in e il valore di deafault fade-in.
Di seguito un frammento di HTML relativo alla slide contente le immagini, da notare la sintassi impiegata per gli attributi class e data-animation degli elementi da animare.
<div class="slide" id="gallery">
<h3>Gallery</h3>
<div class="img-wrapper animate-in" data-animation="fly-in-left">
<img src="images/2008_Motegi.jpg">
<small>Simoncelli at the 2008...</small>
</div>
<div class="img-wrapper animate-in" data-animation="fly-in-right">
<img src="images/2009_Donington_Park.jpg">
<small>Simoncelli at the 2009...</small>
</div>
</div>Un tale sistema è semplice e veloce da utilizzare, tuttavia può risultare limitato e poco flessibile, niente paura. Tramite Javascript è possibile richiamare manualmente sugli elementi il metodo animate di Scrollorama, che consente animazioni più avanzate, come rotazioni, zoom, dissolvenze, etc. Tale metodo, invocato dall'istanza scrolldeck.controller, accetta due argomenti, il selettore CSS che identifica l'elemento da animare e un oggetto options che permette di customizzare l'effetto impostando gli opportuni valori. Questi sono i parametri configurabili:
| Parametro | Descrizione |
|---|---|
| duration | durata dell'animazione espressa in pixel di scorrimento della pagina |
| delay | numero di pixel di scorrimento della pagina prima dell'inzio dell'animazione |
| property | proprietà CSS oggetto dell'animazione, consentite solo quelle con valori numerici |
| start | valore della proprietà CSS all'inizio dell'animazione |
| end | valore della proprietà CSS alla fine dell'animazione |
| pin | boleano, se true blocca lo scorrimento dell'elemento fino alla fine dell'animazione |
Interessante la parte che consente la creazione di un effetto parallax, impostando sugli elementi animati un posizionamento sfalzato e una diversa velocità di movimento rispetto allo scroll verticale del documento.
// add animations using the scrolldeck.controller (see Scrollorama plugin)
deck.controller.animate('#instructions',{ duration: 100, property:'opacity', end: 0 });
deck.controller.animate('#title',{ duration: 200, property:'letter-spacing', end: 26 });
deck.controller.animate('#sub-title',{ duration: 350, property:'opacity', end: 0 });
// parallax effect
deck.controller.animate('#parallax1',{ delay: 400, duration: 1000, property:'top', start:300, end:-300 });
deck.controller.animate('#parallax2',{ delay: 500, duration: 400, property:'top', start:700, end:-700 });
deck.controller.animate('#parallax3',{ delay: 400, duration: 650, property:'top', start:800, end:-800 });
deck.controller.animate('#parallax4',{ delay: 200, duration: 1200, property:'top', start:400, end:-400 });
// scroll indicator
$(window).bind('scroll', function(){
$('#pixels').html($(this).scrollTop());
});Un esempio stupendo è il sito nikebetterworld.com, dove non manca l'indicatore
di pixel scrollati per visualizzare completamente la pagina web.
Non rimane che scaricare il file necessari.
Link Utili
