skrollr: parallax scrolling per Web e Mobile

18 febbraio 2014

skrollr consente di animare qualsiasi proprietà CSS di qualsiasi elemento in base alla posizione barra di scorrimento orizzontale.

Le uniche operazioni che bisogna compiere sono quelle di definire le regole di animazione in base all’offset della pagina.

Può sembrare complicato da comprendere ma vediamo insieme un esempio per chiarire: supponiamo di voler cambiare il colore di sfondo di un div a seconda della posizione dello scroll della pagina, possiamo utilizzare la seguente sintassi:

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>

L’attributo data-x racchiude le proprietà dell’elemento alla posizione x dello scroll della pagina. Nel nostro esempio alla posizione 0 si ha come background un colore blu che pian piano diventerà rosso quando lo scroll della pagina raggiungerà la posizione 500.

Utilizzare skrollr

Per utilizzare skrollr all’interno delle nostre pagine sono sufficienti due semplici operazioni:

  1. Includere il file JavaScript all’interno della pagina
  2. Richiamare il metodo init sull’oggetto skrollr.

Il codice necessario è il seguente:

<script type="text/javascript" src="skrollr.min.js"></script>
<script type="text/javascript">
  var s = skrollr.init();
</script>

È consigliabile inserire il codice appena visto subito prima della chiusura del tag body.

Se vuoi aggiornamenti su skrollr: parallax scrolling per Web e Mobile inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su skrollr: parallax scrolling per Web e Mobile

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy