Oggi volevamo porre alla vostra attenzione un plugin per jQuery che spesso avrete visto utilizzare, scrollorama.
Questo plugin crea vari effetti di transizione allo scorrimento della pagina ed è basato sul presupposto della divisione degli elementi delle pagina in diversi blocchi di uguale altezza, animati dallo scrolling dell’utente in base alla posizione della finestra del browser.
Questi alcuni parametri da poter utilizzare:
| 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 |
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. Tra gli esempi online più performanti segnaliamo il sito della nike ( Nike Better World ), dove si può ammirare un utilizzo molto creativo del plugin.
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.
Come sempre gli strumenti da utilizzare ormai non mancano, la differenza la fa la creatività e la competenza di chi li utilizza. Come sempre
2 Risposte a jQuery plugin: Scrollorama
Ilayda 14 luglio 2012
Io avevo utilizzato quetso, secondo te e8 la stessa cosa?jQuery.fn.extend({ slideRightShow: function() { return this.each(function() { $(this).show( slide’, {direction: right’}, 1000); }); }, slideLeftHide: function() { return this.each(function() { $(this).hide( slide’, {direction: left’}, 1000); }); }, slideRightHide: function() { return this.each(function() { $(this).hide( slide’, {direction: right’}, 1000); }); }, slideLeftShow: function() { return this.each(function() { $(this).show( slide’, {direction: left’}, 1000); }); }});
Was Speaker's Corner 14 luglio 2012
Ciao IIayda ……. allora diciamo che il principio è lo stesso, ma questo plugin riesce a fare molte più cose e senza un grosso dispendio di energie !