In questo tutorial, diamo un'occhiata a un bellissimo effetto di scorrimento parallasse nel modo più semplice, con sfondi fissi e contenuto scorrevole.

Scarica i file sorgente Visualizza la demo

Una breve introduzione

La parallasse è un effetto in cui la posizione di un oggetto sembra essere diversa se vista da posizioni diverse. Il movimento di parallasse, o nel nostro caso lo scorrimento di parallasse, ci dà quindi l'illusione che due oggetti nella stessa linea di vista, ma con una distanza tra loro, sembrino muoversi a velocità diverse. Se hai mai guardato fuori dal finestrino di un'auto mentre guidavi a 100 km all'ora lungo un'autostrada, noterai che i pali dell'elettricità sembrano sfrecciare a un ritmo elevato, mentre le montagne sullo sfondo sembrano muoversi molto lentamente , quasi fermo. Questo è il movimento di parallasse in azione.

Per quanto riguarda il web, possiamo indurre un effetto di parallasse sui contenitori che hanno immagini di sfondo e testo sopra di essi. Nella sua forma più semplice, lo scorrimento in parallasse farà scorrere il contenuto normalmente e lo sfondo rimarrà fermo. Il bello di questa tecnica nella sua forma più semplice è che richiede solo CSS. Scendiamo.

Il markup e la struttura

Se avessi un sito fisso che non rispondeva, non ci sarebbe alcun trucco per raggiungere questo obiettivo. Siamo nell'era del responsive web design, quindi è un no. Non aver paura! Abbiamo dei simpatici CSS a nostra disposizione. Ma prima, uno sguardo ad alcuni markup. Il markup è semplice: avremo sections alternate di sfondo/testo di intestazione e sections di contenuto per ottenere il massimo effetto. Ecco come appare:

  

    
Sereno
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
Salita
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
Calma
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  

Ogni section con una classe di parallax conterrà le nostre immagini di sfondo e il testo dell'intestazione, mentre ogni section con una classe di content sarà costituita da semplici sezioni contenenti contenuto. La classe container è un div fluido con una larghezza massima, rendendo la reattività di tutto molto semplice. Ora, scaviamo nel CSS.

Styling e come farlo funzionare con CSS

Il primo punto da notare è che tutte le mie immagini di sfondo hanno una width di 1600px e height di 600px. Ciò mi consente di impostare le mie sezioni di parallasse a un'altezza fissa di 600px. C'è un po' di più però. Poiché non voglio sfondi ripetuti (sto usando immagini grandi e in grassetto), non posso sempre aspettarmi che gli utenti abbiano la larghezza massima (che consentirà alle immagini di sfondo di essere in piena vista). Fortunatamente per noi, possiamo utilizzare la proprietà CSS background-size e cover su . Ciò costringe l'immagine di sfondo a occupare lo spazio totale disponibile espandendolo proporzionalmente. Tuttavia, deve essere prefissato per il massimo supporto, quindi tienilo presente.

Fin qui tutto bene, tranne che per la cosa più importante. Abbiamo bisogno che la nostra immagine di sfondo rimanga fissa mentre il nostro contenuto scorre oltre. Ancora una volta, CSS ci semplifica la vita. Utilizziamo la proprietà background-attachment e la impostiamo su fixed . Semplice! Ecco come appare il mio CSS, con alcune query multimediali di esempio:

 /* =========================================================== =============
  STRUTTURA PRIMARIA
====================================================================================================================================== ========== */
.container {
  larghezza massima: 960px;
  margine: 0 automatico;
}
/* =========================================================== =============
  SEZIONI
====================================================================================================================================== ========== */
sezione.modulo:ultimo figlio {
  margine inferiore: 0;
}
modulo.sezione h2 {
  margine inferiore: 40px;
  famiglia di caratteri: "Roboto Slab", serif;
  dimensione del carattere: 30px;
}
sezione.modulo p {
  margine inferiore: 40px;
  dimensione del carattere: 16px;
  peso del carattere: 300;
}
sezione.module p:ultimo figlio {
  margine inferiore: 0;
}
contenuto.modulo.sezione {
  imbottitura: 40px 0;
}
sezione.modulo.parallasse {
  altezza: 600px;
  posizione di sfondo: 50% 50%;
  background-repeat: no-repeat;
  sfondo-allegato: fisso;
  dimensione dello sfondo: copertina;
}
sezione.modulo.parallasse h1 {
  colore: rgba(255, 255, 255, 0,8);
  dimensione del carattere: 48px;
  altezza della linea: 600px;
  peso del carattere: 700;
  allineamento testo: centro;
  trasformazione del testo: maiuscolo;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
sezione.modulo.parallasse-1 {
  immagine di sfondo: url("../img/demo/_small/1.jpg");
}
sezione.modulo.parallasse-2 {
  immagine di sfondo: url("../img/demo/_small/2.jpg");
}
sezione.modulo.parallasse-3 {
  immagine di sfondo: url("../img/demo/_small/3.jpg");
}

@media tutti e (larghezza minima: 600px) {
  modulo.sezione h2 {
    dimensione del carattere: 42px;
  }
  sezione.modulo p {
    dimensione del carattere: 20px;
  }
  sezione.modulo.parallasse h1 {
    dimensione del carattere: 96px;
  }
}
@media tutti e (larghezza minima: 960px) {
  sezione.modulo.parallasse h1 {
    dimensione del carattere: 160px;
  }
}

Supporto browser e informazioni sulla proprietà

Il supporto del browser in generale è davvero eccezionale. IE8 e versioni precedenti non supporteranno la proprietà background-size , ma un semplice stile condizionale dovrebbe occuparsene. A parte questo, tutto è supportato e non dovresti avere problemi. Per maggiori informazioni sulle proprietà CSS utilizzate in questo tutorial, controlla l'MDN:

• Posizione in background – Riferimento MDN
• Dimensione sfondo : riferimento MDN
• Allegato in background – Riferimento MDN

Incartare

Qui, abbiamo implementato qualcosa che è semplice, efficace e un po' diverso dal normale tipo di look che scorre tutto in una volta. Abbiamo utilizzato alcune tecniche CSS simpatiche ma meno conosciute per ottenere l'effetto desiderato. E questo è un involucro! Non dimenticare che puoi visualizzare la demo e scaricare il sorgente facendo clic sui link sottostanti, e se hai domande, commenti o feedback, puoi anche lasciarli qui sotto.