Come creare: scorrimento parassiale

Impara come creare un effetto di scorrimento 'parassiale' utilizzando CSS.

Scorrimento parassiale

La scorrimento parassiale è una tendenza di progettazione del sito web, in cui il contenuto di sfondo (ad esempio, le immagini) si muove a velocità diversa rispetto al contenuto in primo piano durante lo scorrimento. Clicca sul link sottostante per vedere la differenza tra siti web con scorrimento parassiale e senza scorrimento parassiale.

demo con effetto di scorrimento di parallaxa

demo senza effetto di scorrimento di parallaxa

Attenzione:La scorrimento di parallaxa non è sempre efficace sui dispositivi mobili/smartphone. Ma puoi disattivare questo effetto sui dispositivi mobili utilizzando le query media (vedi l'ultimo esempio su questa pagina).

come creare l'effetto di scorrimento di parallaxa

Utilizza un elemento contenitore e aggiungi all'elemento un'immagine di sfondo con altezza specifica. Poi, utilizza background-attachment: fixed crea l'effetto di parallaxa reale. Altre proprietà di sfondo sono utilizzate per centrare e zoomare perfettamente l'immagine:

esempio in pixel

<style>
.parallax {
  /* Immagine utilizzata */
  background-image: url("img_parallax.jpg");
  /* Imposta altezza specifica */
  min-height: 500px;
  /* Crea l'effetto di scorrimento di parallaxa */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
/* Elemento contenitore -->
<div class="parallax"></div>

prova personalmente

Nell'esempio sopra, l'altezza dell'immagine è impostata in pixel. Se desideri utilizzare la percentuale, ad esempio 100%, per far si che l'immagine si adatti a tutto lo schermo, imposta l'altezza del contenitore di parallaxa al 100%. Attenzione: devi anche impostare height: 100% applicato a <html> e <body>:

esempio in percentuale

body, html {
  height: 100%;
}
.parallax {
  /* Immagine utilizzata */
  background-image: url("img_parallax.jpg");
  /* Altezza totale */
  height: 100%;
  /* Crea l'effetto di scorrimento di parallaxa */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

prova personalmente

alcuni dispositivi mobili utilizzano background-attachment: fixed può causare problemi. Ma puoi disattivare l'effetto di parallaxa sui dispositivi mobili utilizzando le query media:

esempio

/* Disattiva la scorrimento di parallaxa per tutti i tablet e smartphone. Puoi aumentare o ridurre i pixel se necessario */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

prova personalmente

Nell'above codice, quando la larghezza dello schermo è inferiore o uguale a 1366 pixel, l'effetto di scorrimento di parallaxa viene disattivato, il che è adatto per la maggior parte dei tablet e smartphone. Questo viene fatto cambiando .parallax della classe background-attachment le proprietà di fissato to scroll Per implementare. In questo modo, l'immagine di sfondo scorrerà insieme al resto della pagina, piuttosto che rimanere fissa nella vista.