skrollr: parallax scrolling per Web e Mobile

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.

Animazioni parallax con skrollr

Ora che abbiamo visto come includere la libreria all'interno della nostra pagina e come assegnare le proprietà agli elementi a seconda della posizione, possiamo iniziare a lavorare con skrollr.

L'esempio che realizzeremo sarà composto da 3 slide, ognuna con effetti differenti. Anzitutto creiamo il markup di base della pagina:

<header data-0="background-color: rgba(255,255,255,1)" data-150="background-color: rgba(255,255,255,.5)">
    <h1>Parallax scrolling demo con skrollr</h1>
</header>
<div id="container">
    <section id="section01">
        <div class="background">
            <div class="container">
                content
            </div>
        </div>
    </section>
    <section id="section02">
        <div class="background">
            <div class="container">
                content
            </div>
        </div>
    </section>
    <section id="section03">
        <div class="background">
            <div class="container">
                content
            </div>
        </div>
    </section>
</div>

Come possiamo notare la struttura della nostra pagina è composta da un header e da 3 sezioni. La prima cosa che sicuramente risalta all'occhio è che abbiamo già iniziato ad utilizzare la libreria nell'header.

Abbiamo infatti utilizzato l'esempio visto all'inizio dell'articolo per impostare un'opacità differente dell'elemento a seconda della posizione dello scroll della pagina. Quando ci troviamo ad inizio pagina, data-0, l'opacità è piena per poi diminuire quando si inizia a scrollare.

Vediamo ora come realizzare le singole slide.

Prima di iniziare

Prima di iniziare vediamo il codice JavaScript che abbiamo bisogno per l'esempio. Oltre ad inizializzare la libreria abbiamo anche la necessità di impostare l'altezza delle singole sezioni pari alla dimensione della finestra del browser. Il codice necessario è il seguente:

$(function(){
    var height = $(window).height();
    $('section').height(height);
    $('section#section03').height(height*2);
    var s = skrollr.init();
});

Slide 1: effetto parallax con effetto uscita del contenuto

Nella prima slide inseriremo un effetto parallax del background ed un effetto in uscita del contenuto dalla sezione.

Per inserire l'effetto parallasse utilizziamo il seguente codice:

<section id="section01">
    <div class="background"
         data-center="background-position: 50% 0px;"
         data-top-bottom="background-position: 50% -100px;"
         data-anchor-target="#section01">
        <div class="container">
            content
        </div>
    </div>
</section>

Il div.background contiene il background della slide. Attraverso gli attributi data-center e data-top-bottom andiamo a definire la posizione del background nelle specifiche posizione. L'attributo data-anchor-target, invece, serve per comunicare alla libreria che i valori non sono riferiti allo scroll della pagina, bensì alla posizione dell'elemento #section01. Questo attributo è molto utile per gestire le animazioni e le transizioni degli elementi che si trovano all'interno di un contenitore.

Ora che abbiamo impostato un semplicissimo effetto parallax, vediamo come fare per inserire un effetto in uscita al contenuto della slide:

<div class="content"
     data-center="opacity: 1"
     data-106-top="opacity: 0"
     data-anchor-target="#section01 h2">
    <h2>This is the title<br>of the first slide</h2>
</div>

Inseriamo il seguente div.content all'interno del div.container della slide ed avremo un effetto in uscita che va ad agire sull'opacità dell'elemento.

Slide 2: effetto parallax orizzontale ed effetto scomparsa laterale

Nella seconda slide andremo a realizzare un effetto parallax orizzontale che, unito alla stessa transizione del contenuto utilizzato nell'esempio precedente, simulerà un effetto a scomparsa laterale. "Simulare" è il termine più adatto poiché la scomparsa laterale è solo un effetto ottico dovuto al movimento orizzontale del background. Il codice di cui abbiamo bisogno è il seguente:

<section id="section02">
    <div class="background"
         data-center="background-position: 0px 50%;"
         data-bottom-top="background-position: 0px 40%;"
         data-top-bottom="background-position: -100px 50%;"
         data-anchor-target="#section02">
        <div class="container">
            <div class="content"
                 data-center="opacity: 1"
                 data-106-top="opacity: 0"
                 data-anchor-target="#section02 h2">
                <h2>This is the title<br>of the second slide</h2>
            </div>
        </div>
    </div>
</section>

Rispetto all'esempio della prima slide l'unica cosa che è cambiata è il valore dei due assi nella proprietà background-position. Il resto è completamente invariato.

Slide 3: cambio di background

Nell'ultima slide, invece, realizzeremo un semplice effetto di cambio background. Per fare ciò abbiamo la necessità di avere la #section03 di dimensioni doppie rispetto al viewport. A questo punto creiamo due div.background ed al secondo assegneremo un colore di background differente; volendo si può anche decidere di utilizzare un'altra immagine al posto del colore piatto.

Il codice necessario è il seguente:

<section id="section03">
    <div class="background"></div>
    <div class="background background2"
         data--33p-top="opacity: 0;"
         data--66p-top="opacity: 1;"
         data-anchor-target="#section03">
        <div class="container">
            <div class="content"
                 data-bottom-top="opacity: 0;"
                 data-center="opacity: 1"
                 data-anchor-target="#section03">
                <h2>End of presentation</h2>
            </div>
        </div>
    </div>
</section>

Nel secondo div.background andiamo a settare i valori dell'opacità in maniera da diventare visibile quandi ci troviamo al centro della #section03. Stesso comportamento è riservato al contenuto, anch'esso diventerà visibile nello stesso momento.

Demo

Siamo giunti alla fine e possiamo conteplare il risultato finale del nostro esempio.