Come realizzare un layout accattivante con lo scorrimento parallasse

Effetto Parallasse
Tempo stimato di lettura: 6 minuti, 49 secondi
108 Flares 108 Flares ×

Oggi voglio mostrarvi come realizzare un layout con scorrimento parallasse per catturare l’attenzione e l’interesse dei  vostri visitatori. Occorre avere un minimo di conoscenza di Css e di Jquery, in ogni caso nel tutorial vi spiegherò passo per passo il codice. Ci sono diversi modi per sfruttare questa tecnica: utilizzando immagini con slide oppure elementi grafici animati. Grazie al codice minimo e snello il caricamento della pagina è più veloce e questo attira ancora di più l’attenzione del visitatore.

Demo

Cenni sul parallasse

Lo scorrimento parallasse è un processo di animazione in 2d che crea un’illusione di profondità attraverso l’animazione di livelli in primo piano ad una velocità maggiore rispetto alle immagini in secondo piano. Pensate a quando viaggiate e osservate il paesaggio da una macchina in movimento. Gli oggetti più vicini alla macchina sembrano muoversi più velocemente rispetto allo scenario più lontano. Il parallasse nel web design utilizza la stessa tecnica e gli stessi principi per creare l’illusione di osservare una scena in 3d.

Tutorial

Il nostro obiettivo è creare quattro pagine che scorrono muovendo i 3 oggetti principali, background, testo ed immagini, a tre velocità differenti con questo procedimento: lo scorrimento del testo viene controllato dal browser secondo la velocità della barra di navigazione ad una velocità naturale; per questo motivo non verrà modificata con javascript. Posizioniamo il nostro testo ad una distanza doppia rispetto all’immagine associata per cui se l’immagine è posizionata a 1000px dall’inizio della pagina, posizioneremo il testo a 2000px dall’inizio della pagina in modo che facendo scorrere il testo al doppio della velocità dello scorrimento delle immagini, sia testo che immagini compariranno in un punto definito dello schermo nello stesso momento. È più difficile spiegarlo che realizzarlo e allora vediamo subito come realizzare il nostro layout in 7 step.

#1 – Struttura della pagina

Prima di tutto è importante definire la struttura della pagina in html che avrà un contenitore generale che includerà i 4 tag ‘article’ che conterranno con un tag h1 per il titolo della pagina e un tag p per il testo:

#2 – Aggiungiamo le immagini

Le immagini vanno inserite prima del contenitore principale ma dobbiamo fare una distinzione tra le diverse immagini.

  1. per l’immagine di backgound verrà aggiunto un contenitore vuoto; l’immagine verrà aggiunta nel foglio di stile.
  2. per l’immagine della lampadina creiamo un altro div perché sarà posizionata all’inizio dello schermo sotto il menù di navigazione e sarà fissa.
  3. le altre immagini, che scorreranno insieme agli altri elementi, le raggruppiamo in un div chiamato immagini, anch’esse con un id, importante per poter essere manipolato con jquery.

#3 – Menù di navigazione

Il menù di navigazione sarà posizionato all’inizio della pagina e sarà sempre visibile quando scrolliamo le varie sezioni. Lo inseriamo nel body prima delle immagini e creiamo una lista non ordinata nel quale inseriamo un’ancora <a> alla classe che ci serve per puntare alla pagina che ci interessa. Per poter far ciò dobbiamo aggiungere ai vari tag article gli stessi id che abbiamo assegnato al tag <a>. Per esempio la prima sezione home ha un id#home nel menù di navigazione; questo div#home andrà aggiunto anche al tag ‘article’ corrispondente.

#4 – Stile della pagina

Prima di tutto aggiungiamo il link allo stile main.css:

Definiamo lo stile dell’immagine in background che deve essere grande quanto tutto lo schermo, fissa e con un livello di z-index pari a 100. Non spaventatevi di non vedere niente, semplicemente il contenuto si trova sotto l’immagine, basterà cambiare il livello del contenuto principale che avrà un z-index pari a 200 e voilà, il contenuto riappare in primo piano. Anche le immagini  per ora avranno una posizione fissa che poi modificheremo con jquery ed un livello di posizione tra il background ed il testo. Il menù abbiamo detto che sarà fisso è posizionato sopra ogni elemento; infine l’immagine della lampadina sarà fissa e posizionata sopra ogni elemento tranne il menù di navigazione. Vediamo lo stile:

#5 – Posizionamento degli elementi

Prima di posizionare gli elementi in maniera corretta, dobbiamo modificare la larghezza dell’article div che deve essere ridotto per lasciare la metà dello spazio all’immagine associata; per cui il testo occuperà la parte sinistra del div content e l’immagine la parte destra. Questo non accadrà per la prima pagina che occuperà tutto il suo contenitore di 960px perchè non ha immagine associata.

Dobbiamo tener conto del fatto che le immagini sono contenute in un div che è posizionato in maniera fissa ad una posizione pari a 0 dell’inizio dello schermo, per cui se posizioniamo l’immagine a 1500px, vuol dire che si trova a 1500px dall’inizio dello schermo; Dobbiamo andare a posizionare ogni singola immagine contenuta nel contenitore #images e posizionarle correttamente, nel nostro esempio a una distanza di 1500px una dall’altra.

Il testo è contenuto in un div con posizione relativa, perchè vogliamo che l’area del testo sia scrollabile con la barra di scorrimento; ciò significa che se lo posizioniamo a 1500px vuol dire che si trova a 1500px non dall’inizio del browser ma dall’inizio del suo contenitore (#content). Questo è importante per calcolare la distanza esatta tra testo ed immagini. Prendiamo ogni singolo ‘article’ con il proprio id e lo posizioniamo ad una distanza doppia dalle immagini.

Adesso gli elementi sono posizionati correttamente anche se non visualizziamo le immagini perchè esse sono fisse. Nel prossimo step vediamo come animarle con jquery.

#6 - Scorrimento dell’immagine in background con jQuery

Prima di tutto creiamo il collegamento ai file jquery:

Creiamo una funzione parallax ed una variabile chiamata scrollposition con la quale selezioniamo il browser e la posizione della barra di scorrimento. Selezioniamo il contenitore dell’immagine in background e cambiamo la posizione fissa dell’immagine settata nel css in modo che il background scorra insieme al testo.

Creiamo la funzione jquery che fissi l’evento di scorrimento, in modo che accada sempre; all’interno di questa funzione richiamiamo la funzione parallasse. Per far si che l’immagine in background scorra più lentamente al 20% della velocità della barra di scorrimento, moltiplichiamo la proprietà scrollposition per 2. Eseguiamo la stessa operazione di prima questa volta selezionando le immagini per cambiare il foglio di stile ed attribuire una velocità pari al 50%. Ecco il codice:

Cosa succede a questo punto? Scrollando lentamente la pagina, compare prima l’immagine, poi il testo che si allineano all’inizio dello schermo nella stessa posizione. Aggiungiamo un po di padding al div #content article in modo che sia il testo che le immagini si fermino ad una certa distanza dal menù di navigazione. Inoltre quando arriviamo all’ultima sezione il testo rimane fisso alla fine della pagina perché la fine del testo corrisponde alla fine dell’area scrollabile per cui dobbiamo aggiungere un pò di padding-bottom sotto il testo per farlo allineare correttamente.

#7 - Animazione del menù di navigazione

Invece di saltare da una pagina all’altra vogliamo far si che al click della voce di menù, la pagina sia raggiunta con un pò di animazione. Ad ogni link abbiamo dato una classe che dobbiamo usare in jquery per selezionarle e puntarle ai rispettivi link. Creiamo una funzione click per ogni sezione all’interno della funzione ready function. Cominciando dalla pagina home facciamo in modo che una cliccando la voce di menù corrispondente la nostra funzione possa animare la nostra pagina grazie alla proprietà scrolltop che ci dice dove andare. Inoltre stabiliamo la durata dell’animazione, che sarà in millesecondi. Lasciamo l’animazione di defalt che è swing e che è la più appropriata per il nostro layout.

Infine per le altre sezioni l’operazione da compiere è la stessa, l’unica differenza sta nel fatto che anziché settare la scrollposition pari a 0 dobbiamo settarla pari  al nome della anchor tag e trovare quanto distante è questo nome dall’inizio della pagina; questo perchè non siamo in grado di calcolare la posizione giusta della sezione chisono e delle successive sezioni.

Il gioco è fatto! Adesso possiamo far scorrere le pagine con una gradevole animazione cliccando le voci del menù di navigazione.

Ti piace questa tecnica? Provala anche tu e modificala a tuo piacimento e se hai domande sono qui a disposizione :)

Demo

  • Daniele Imperi

    Ho visto spesso questo sistema, ma non lo trovo utile per un semplice motivo: il tuo sito sarà composto di una sola pagina e oggi, con tutte le pagine che sono online, hai bisogno di contenuti e tanti anche.

    Potrebbe andar bene per siti “satellite”: non so, un sito dedicato a pubblicizzare un evento, oppure per alcune pagine interne al sito, ma io non userei mai questa tecnica per creare un intero sito.

    Che ne pensi di questa mia critica?

    È rivolta solo all’utilizzo, chiarisco, non al tutorial. :)

    • Carlo Ventrella

      Daniele, sono in parte d’accordo con te e in parte no. Ci sono siti, magari di presentazioni, siti molto elementari e tutt’altro che complessi, sui quali un effetto del genere può essere di grande impatto visivo. Poi è ovvio che ci sono siti e siti, non puoi certo mettercelo in un sito, come dici tu, composto da molte pagine. In siti per esempio di giornalismo o siti come questo siamo d’accordo che non c’è utilità.

      In conclusione, credo nell’utilità di questo effetto, quando si sa dove usarlo :)

      Comunque, all’autrice, complimenti per l’articolo!

      • Aledero design

        Ciao Carlo grazie per il tuo commento e per i complimenti :)

    • Aledero design

      Ciao Daniele,

      La tua osservazione e’ giusta. Non c’e’ niente da dire sul fatto che questa tecnica non puo’ essere utilizzata per qualsiasi sito e crea degli effetti originali privilegiando le immagini. Questa tecnica per esempio va molto di moda tra le agenzie web e i web designer che utilizzano degli effetti accattivanti per presentare il proprio portfolio. E’ sconsigliato sicuramente per i siti che presentano layout piu’ complessi come giornali e banche, ma come detto nell’ articolo anche creare una galleria immagini su piu’ livelli originerebbe un simpatico effetto che andrebbe bene per qualsiasi sito. E poi trattandosi di una tecnica, non esclude il fatto che potrebbe essere adottata da piu’ pagine e non solo layout ad una pagina…

      Io personalmente adoro questa tecnica e la utilizzerei per qualsiasi sito ma so che non e’ possibile. :)

  • giaba90

    A me piace molto questo effetto! Cercavo un tutorial come questo. Condivido il fatto che non si può usare su tutti i siti.Saper fare delle scelte è una capacità che noi umani abbiamo a differenza dei computer, quindi saper dove e quando utilizzare questo effetto IMO darà dei bei effetti visivi e gestionali

    • Aledero design

      Ciao Giaba90, felice che il tutorial ti sia utile, se prossimamente hai qualche domanda sulla procedura, fai pure :)

  • Ugo Basile

    Sicuramente un buon tutorial, per l’uso della tecnica condivido il pensiero degli altri è utile per alcuni tipi di siti non per tutti.

    • Aledero design

      Grazie Ugo :)

      • Ugo Basile

        Di nulla, se una cosa è fatta bene perchè non dirlo :-)

        • Aledero design

          :)

  • http://www.decadeweb.it/ Simone

    Ottimo tutorial! Complimenti …

    • Aledero design

      Grazie anche a te Simone :)

  • Marco

    Ciao, complimenti per l’articolo bello e molto chiaro. :)

    • Aledero design

      Ciao Marco mille grazie :)

  • michele

    jquery-1.9.1.min.js è diciamo una spece di libreria? scusa la domanda forse ovvia ma non conosco il jquery :)

108 Flares Twitter 41 Facebook 48 Google+ 13 LinkedIn 6 Pin It Share 0 108 Flares ×