Questo esempio è stato ideato per essere visualizzato da un Desktop, quindi se stai vedendo da mobile vedrai un'immagine ferma.
Il codice sorgente per questo effetto parallax con JavaScript è disponibile sulla repository GitHub di devnews.it
Sei libero di scaricare l’esempio e di usarlo nel tuo sito, ti chiedo in cambio solamente: o di condividere questo tutorial su Facebook tramite il pulsante a fine tutorial, o di citarmi con un backlink al mio sito quando implementi il mio esempio parallax nella tua pagina.
Grazie mille.
Che cos’è l’effetto Parallax?
Il Parallax (o parallasse) è un effetto usato nella grafica 2D per la simulazione di uno spazio tridimensionale e di una prospettiva.
Per realizzare questa illusione di spazio 3D si ha bisogno di utilizzare dei “strati” di immagini sovrapposte l’una sull'altra, come puoi vedere in questa foto esempio:
Ognuna di queste immagini si può muovere verticalmente od orizzontalmente, ma per ottenere l’effetto parallax bisogna seguire una regola:
Più l’immagine è vicina a te o alla persona che osserva, più questa si deve muovere velocemente.
Infatti se guardi l’esempio dell’aereo, vedrai che l’immagine di sfondo non si muove per niente, l’ala dell’aereo si muove lentamente e la scritta in primo piano si muove più velocemente.
Il problema principale per la realizzazione dell’effetto parallasse è trovare un’immagine sezionata a strati.
Io per la realizzazione dell’esempio ho preso quest’immagine di un aereo che aveva uno sfondo non troppo complicato, ed ho ritagliato attentamente l’ala usando Photoshop. Poi ho aggiunto un terzo strato: la scritta, ottenendo tre strati trasparenti, salvando ogni strato nel formato .png per ottenere la trasparenza:
Adesso passiamo al codice JavaScript, HTML e CSS che ho usato per ottenere l’effetto parallasse.
Codice HTML
Tre semplici div a cui assegnerò un’immagine di background
<header class="box"><div class="ala"></div><div class="scritta"></div> </header>
Codice CSS
.box{
position: relative;
height: 518px;
width: 100%;
max-width: 1000px;
background-image: url("http://images.devnews.it/tutorials/parallax/sfondo.png");
background-attachment: fixed;
background-clip: content-box;
background-repeat: no-repeat;
overflow: hidden;
background-size: 100% 100%;
}
.scritta{
background-image: url("http://images.devnews.it/tutorials/parallax/testo.png");
width: 100%;
max-width: 1000px;
height: 518px;
background-repeat: no-repeat;
background-clip: content-box;
position: absolute;
z-index: 2;
top: -150px;
background-size: 100% 100%;
}
.ala{
background-image: url("http://images.devnews.it/tutorials/parallax/aereo.png");
height: 518px;
position: absolute;
max-width: 1000px;
background-repeat: no-repeat;
background-clip: content-box;
width: 100%;
top: -170px;
z-index: 1;
background-size: 100% 100%;
}
Ti spiegherò solamente le regole CSS più importanti, ovvero:
- position relative (solo .box): Per poter posizionare l’ala e la scritta in posizione assoluta relativa a .box
- background-attachment: Per fissare lo sfondo durante lo scorrimento del Browser
- overflow: Per nascondere l’ala e la scritta quando escono da .box
- posizione assoluta: Per l’ala e la scritta in modo da poterli posizionare relativi a .box
Le altre regole CSS sono solamente per posizionare meglio gli elementi.
Codice JavaScript
$(window).scroll(function(){var scrollVericale = $(this).scrollTop();$(".scritta").css({"transform" : "translate(0px, " + scrollVericale / 10 + "%)"});$(".ala").css({"transform" : "translate(0px, " + ( scrollVericale / 6) + "%)"}); });
Durante l’evento scroll del browser catturo la posizione verticale del viewport.
Uso questa posizione verticale per muovere l’ala e la scritta a velocità diverse. Le velocità diverse sono ottenute dividendo scrollVerticale una volta per 10 e una volta per 6. Modifica questi valori a seconda della tua velocità di movimento desiderata.
Ci siamo! ora puoi creare l'effetto parallax o parallasse usando solamente jQuery.
Ricorda che sei libero di utilizzare questo esempio, includendo le immagini sul mio server per il tuo sito, in cambio chiedo solamente che tu possa linkare questo tutorial sul tuo sito o di condividere il post su Facebook. Puoi scaricare il codice completo da GitHub.
Grazie mille
