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.
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:
<!DOCTYPE html>
<html>
<head>
<title>Effetto parallasse</title>
<meta charset="utf-8"/>
</head>
<body>
<div id="content">
<article>
<h1></h1>
<p></p>
</article>
</div>
</body>
</html>
#2 – Aggiungiamo le immagini
Le immagini vanno inserite prima del contenitore principale ma dobbiamo fare una distinzione tra le diverse immagini.
- per l’immagine di backgound verrà aggiunto un contenitore vuoto; l’immagine verrà aggiunta nel foglio di stile.
- per l’immagine della lampadina creiamo un altro div perché sarà posizionata all’inizio dello schermo sotto il menù di navigazione e sarà fissa.
- 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.
<div id="idea"><img src="img/lampadina.svg" alt="idea"/></div>
<div id="backgr"></div>
<div id="immagini">
<img id="img-chisono" src="img/chisono.svg" alt="chisono"/>
<img id="img-lampadina" src="img/tools.svg" alt="strumenti"/>
<img id="img-contatti" src="img/caffe.svg" alt="caffè"/>
</div><!--fine immagini -->
#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.
<nav id="menu">
<ul>
<li><a class="home" href="#home">Home</a></li>
<li><a class="chisono" href="#chisono">Chi sono</a></li>
<li><a class="servizi" href="#servizi">Strumenti</a></li>
<li><a class="contatti" href="#contatti">Scrivimi</a></li>
</ul>
</nav>
#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:
/***********************************BACKGROUND************************************/
#backgr{
background:#333 url("../img/lavagna.svg") top center;
width:100%;
height:8000px;
position:fixed;
top:0;
z-index:100;
}
/***********************************IDEA************************************/
#idea{
width:100%;
position:relative;
text-align:center;
z-index:900;
}
/***********************************IMAGES************************************/
#immagini{
position:fixed;
top:0;
width:100%;
z-index:200;
}
/***********************************CONTENT************************************/
#content{
color:#fff;
position:relative;
margin:0 auto;
width:960px;
z-index:300;
font-family: "kg_second_chances_sketchRg";
}
/***********************************MAIN MENU"************************************/
#menu{
background:#fff;
height:45px;
padding:0;
margin:0;
position:fixed;
top:0;
width:100%;
z-index:1000;
font-family: "kg_second_chances_sketchRg";
}
#menu ul{
width:960px;
margin:0 auto;
height:25px;
padding-top:15px;
}
#menu ul li{
float:left;
height:30px;
width:200px;
padding-left:0;
list-style-type:none;
text-align:center;
}
#menu ul li a{
color:#333;
font-weight:bold;
text-decoration:none;
}
#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.
#content article{
width:350px;
padding-top:50px;
}
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.
#img-chisono{
position:absolute;
top:1500px;
left:50%;
}
#img-lampadina{
position:absolute;
top:3000px;
left:50%;
}
#img-contatti{
position:absolute;
top:4500px;
left:50%;
}
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.
#chisono{
position:absolute;
top:2717px;
}
#servizi{
position:absolute;
top:5717px;
}
#contatti{
position:absolute;
top:8717px;
padding-bottom:320px;
}
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.
function parallax() {
var scrollPosition=$(window).scrollTop();
$("#backgr").css("top",(0 - (scrollPosition) +"px");
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:
function parallax() {
var scrollPosition=$(window).scrollTop();
$("#backgr").css("top",(0 - (scrollPosition *.2)) +"px");
$("#immagini").css("top",(0 -(scrollPosition * .5)) + "px");
}
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.
$("a.home").click(function(){
$("html, body").animate({ scrollTop:0}, 1000,
function() {
parallax();
});
return false;
});
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.
$("a.chisono").click(function(){
$("html, body").animate({ scrollTop:$("#chisono").offset().top}, 1000,
function() {
parallax();
});
return false;
});
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 🙂
