Come realizzare una pagina web con effetto Parallax in puro CSS
Ti sarà spesso capitato di trovare pagine, o spesso siti realizzati come unica pagina, in cui lo sfondo presente nei vari blocchi di contenuto si sposta molto più lentamente rispetto allo scorrimento della pagina, o resta frizzato, creando un effetto molto gradevole e "moderno".
Questo effetto si chiama PARALLAX, e si può realizzare in puro CSS o con il supporto di javascript.
In questo articolo vediamo come ottenerlo utilizzando solo i fogli di stile.
Questo sarà il risultato che vogliamo ottenere
Creiamo una pagina con questo codice html, a cui dopo aggiungeremo il css.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bgimg-1">
<div class="caption">
<span class="border">SCROLL DOWN</span>
</div>
</div>
<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center;">Parallax Demo</h3>
<p>Prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova.</p>
</div>
<div class="bgimg-2">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scorri la pagina su e giù per vedere come funziona l'effetto parallasse.</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scorri la pagina su e giù per vedere come funziona l'effetto parallasse.</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">COOL!</span>
</div>
</div>
</body>
</html>
</body>
</html>Come potete vedere sono presenti dei DIV, con una immagine di background, alternati con DIV contenente un contenuto di testo:
- Il primo, il terzo, il quinto e il settimo DIV hanno presentano una immagine di background, grazie alla classe "bgimg-x" (dove al posto di x trovate un numero che identifica la classe)
- Il secondo, il quarto e il sesto DIV contengono del testo.
Per ottenere l'effetto parallasse abbiamo bisogno delle immagini da mettere come background dei quattro div e del css.
Per la precisione ci servono 3 immagini, perchè come quarta useremo la stessa usata nel primo div. I nomi di queste immagini sono "img_parallax.jpg", "img_parallax2.jpg", e "img_parallax3.jpg", e te li fornisco nel file zippato a fondo articolo.
Il css lo implementiamo subito per comodità direttamente dentro alla pagina, e quindi senza usare un file esterno.
Aggiungiamo nella sezione <head> della nostra pagina questo codice per aggiungere lo stile.
<style>
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 arial, sans-serif;
color: #777;
}
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: 0.65;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("img_parallax.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("img_parallax2.jpg");
min-height: 400px;
}
.bgimg-3 {
background-image: url("img_parallax3.jpg");
min-height: 400px;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: scroll;
}
}
</style>Non mi soffermo troppo sulla sua spiegazione.
Ai 3 DIV contenenti l'immagine viene dato un posizionamento relativo, con un "background-attachment" con proprietà fixed, center, no repeat e cover, che ci consente di fissare l'immagine come background.
Abbiamo poi le tre classi "bgimg-x", che definiscono l'immagine da visualizzare.
Mettete assieme il codice e.... l'effetto parallax è servito! Scorrendo la pagina potrete vedere le immagini di background frizzate mentre il resto della pagina scorre.
Al termine di questo articolo potrai scaricare il codice di questo esempio.
Nel prossimo articolo vedremo come ottenere l'effetto parallax con javascript: allo scorrimento della pagina facciamo scorrete anche le immagini ma più lentamente, e per fare questo utilizzeremo una libreria javascript.
Stay tuned!
