Mauro Mandalari

Lavoro nel campo della comunicazione web da più di 15 anni, sviluppo strategie di comunicazione web efficaci, mi occupo di WebDesign, WebDeveloping, UserExperience, DigitalStrategy.

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.

Lavoro nel campo della comunicazione web da più di 15 anni, sviluppo strategie di comunicazione web efficaci, mi occupo di WebDesign, WebDeveloping, UserExperience, DigitalStrategy.