Come fare per - Scorrimento della parallasse
Scopri come creare un effetto di scorrimento "parallasse" con CSS.
Parallasse
Lo scorrimento in parallasse è una tendenza del sito Web in cui il contenuto in background (ad esempio un'immagine) viene spostato a una velocità diversa rispetto al contenuto in primo piano durante lo scorrimento. Fare clic sui collegamenti sottostanti per vedere la differenza tra un sito Web con e senza scorrimento in parallasse.
Demo con scorrimento in parallasse
Demo senza scorrimento del parallasse
Nota: lo scorrimento in parallasse non funziona sempre su dispositivi mobili/smartphone. Tuttavia, puoi utilizzare le query multimediali per disattivare l'effetto sui dispositivi mobili (vedi l'ultimo esempio in questa pagina).
Come creare un effetto di scorrimento di parallasse
Usa un elemento contenitore e aggiungi un'immagine di sfondo al contenitore con un'altezza specifica. Quindi utilizzare background-attachment: fixed
per creare l'effetto di parallasse effettivo. Le altre proprietà dello sfondo vengono utilizzate per centrare e ridimensionare perfettamente l'immagine:
Esempio con pixel
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position:
center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element
-->
<div class="parallax"></div>
L'esempio sopra ha utilizzato i pixel per impostare l'altezza dell'immagine. Se si desidera utilizzare la percentuale, ad esempio 100%, per adattare l'immagine all'intero schermo, impostare l'altezza del contenitore di parallasse su 100%. Nota: devi applicare anche height: 100%
a <html> e <body>:
Esempio con percentuale
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax
scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Alcuni dispositivi mobili hanno un problema con background-attachment: fixed
. Tuttavia, puoi utilizzare le query multimediali per disattivare l'effetto di parallasse per i dispositivi mobili:
Esempio
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}