Javascript: Effetto parallax in una pagina HTML tramite scrolling
L’effetto Parallax dell’iPhone è un effetto davvero suggestivo e invidiato. In questo articolo vi spiegherò in poche righe di codice come riprodure l’effetto parallax tramite lo scrolling di una pagina HTML.
L’effetto parallx ha la proprietà di dare a una serie di elementi in 2D una cerca profondità e di dare l’illusione di un posizionamento tridimensionale. Questo semplice effetto è facilmente riproducibile tramite un piccolo codice in Javascript.
Descrizione effetto parallax
Il codice in javascript ha lo scopo di trovare i vari elementi a cui applicare l’effetto parallax e in seguito di interpretare come input il semplice scrolling del mouse da parte dell’utente. Dividerà il numero di pixel spostati in modo da diminuire la velocità di spostamento dell’elemento HTML e quindi creare una sorta di profondità rispetto allo sfondo della pagina.
Ecco quindi il codice commentato:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | < !DOCTYPE html>
<html>
<head>
<title>Effetto Parallax in Javascript</title>
<style type="text/css">
body{
margin:0;
padding:0;
background: url(sfondo.jpg) fixed center center;
}
/* POSIZIONE I 2 LIVELLI DA SPOSTARE */
#parallax_lv_1{
position:fixed;
background: url(livello.png) no-repeat 500px 200px;
width:100%;
height:800px;
}
#parallax_lv_2{
position:fixed;
background: url(livello.png) no-repeat 100px 400px;
width:100%;
height:1000px;
}
section{ position:absolute; }
section p{ font-size:56px; margin:0; padding:0; color: darkred; }
</style>
<script type="text/javascript">
//CREA LA FUNZIONE PARALLAX
function parallax(){
//TROVA I DUE ELEMENTI DA SPOSTARE
var parallax_lv_1 = document.getElementById('parallax_lv_1');
var parallax_lv_2 = document.getElementById('parallax_lv_2');
//POSTA VERSO L'ALTO L'ELEMENTO DEL NUMERO DI PX
//PARI ALLO SCROLL EFFETTUATO DALL'UTENTE DIVISO 4 E 8
parallax_lv_1.style.top = -(window.pageYOffset /4)+'px';
parallax_lv_2.style.top = -(window.pageYOffset /8)+'px';
}
//RICHIAMA LA FUNZIONE PARALLAX
window.addEventListener("scroll", parallax, false);
</script>
</head>
<body>
<!-- I DUE ELEMENTI DA SPOSTARE -->
<div id="parallax_lv_1"></div>
<div id="parallax_lv_2"></div>
<!-- ELEMENTI CASUALI DI UNA PAGINA WEB -->
<section>
<p>Riga di riempimento 1</p>
<p>...etc..</p>
<p>RIMUOVO I VARI ELEMENTI PER QUESTIONE DI ORDINE</p>
<p>Riga di riempimento 20</p>
</section>
</body>
</html> |
Come possiamo notare in questo semplice esempio troviamo 2 elementi di colore rosso che si muovono a 2 diverse velocità. Tramite window.addEventListener percepiamo quando la pagina viene spostata e con window.pageYOffset capiamo di quanti pixel.
Con parallax_lv_1.style.top = -(window.pageYOffset /4)+’px’; spostiamo l’elemento del numero di pixel scrollati divisi per 4. Cambiando il divisore otteniamo diverse velocità.
Nota importante è il segno meno davanti a alla formula, infatti questo ci permetterà di spostare l’elemento nel verso opposto allo scrolling effettuato dall’utente.
Ovviamente cambiando il CSS della pagina possiamo creare qualcosa di più suggestivo e far stupire i nostri visitatori.
Spero di essere stato chiaro, a presto!
