Pagina singola con effetto parallax

17 marzo 2014

L’effetto parallax è senz’altro, da diversi mesi, uno dei trend più diffusi nel web design. Sul web lo si può vedere declinato nei modi più svariati, dalle realizzazioni più semplici e minimalistiche alle sperimentazioni più ardite e complesse. In questo articolo lo applicheremo al design di una pagina singola suddivisa in sezioni, caratterizzata dalla presenza di grandi foto a tutto schermo alternate a pannelli testuali informativi.

In uno scenario d’uso reale è una soluzione che si presta per tipologie di siti ben precise: portfolio oppure pagine illustrative di un particolare prodotto o servizio. L’ispirazione, tra le tante proposte rintracciabili sul web, viene dalla home page della popolare applicazione musicale Spotify.

Iniziamo subito, proponendo sin da ora il link alla versione finale della nostra demo.

La struttura della pagina: il markup HTML

Questo tipo di pagine presenta una struttura molto semplice.

Di norma si ritrova in alto una testata con un menu di navigazione le cui voci puntano alle sezioni in cui è suddiviso il documento; questo header è di solito fisso, consentendo all’utente di avere sempre a portata di click un modo per muoversi all’interno della pagina. Ecco come abbiamo definito la testata nel nostro esempio:

<header class="menu">
  <div class="container">
   <nav>
    <ul class="navigation">
     <li><a href="#slide1">Pannello 1</a></li>
     <li><a href="#slide2">Pannello 2</a></li>
     <li><a href="#slide3">Pannello 3</a></li>
     <li><a href="#slide4">Pannello 4</a></li>
     <li><a href="#slide5">Pannello 4</a></li>
     <li><a href="#slide6">Pannello 4</a></li>
    </ul>
   </nav>
  </div> 
</header>

Dopo l’header ritroviamo una serie di sezioni o pannelli. Si alternano pannelli con grandi foto usate come sfondo e pannelli che nel nostro caso contengono solo testo ma che potrebbero naturalmente ospitare qualsiasi tipo di contenuto.

Nella demo le sezioni sono definite con una serie di elementi section che costituiscono l’ossatura fondamentale della pagina:

<section class="slide" id="slide1">
 [...]
</section>

<section class="slide" id="slide2">
 [...]
</section>

<section class="slide" id="slide3">
 [...]
</section>

<section class="slide" id="slide4">
 [...]
</section>

<section class="slide" id="slide5">
 [...]
</section>

<section class="slide" id="slide6">
 [...]
</section>

Ogni sezione è identificata con un id univoco e una classe slide che ci servirà per impostarne le caratteristiche visuali nel CSS.

Nella demo, per gestire il layout all’interno delle sezioni, sono stati usati la griglia e il markup di Bootstrap 3, ma va bene qualunque soluzione, per l’effetto che vogliamo ottenere è importante solo la struttura delle sezioni così come è stata tracciata qui sopra.

Applichiamo gli stili alle sezioni

Negli esempi allegati all’articolo gli stili specifici delle varie demo sono contenuti nel foglio stile.css, mentre griglia.css contiene qualche regola di reset e le impostazioni per la griglia di Bootstrap. Vediamo subito come approcciare la configurazione del layout.

Per prima cosa, prevedendo di avere la sezione iniziale che si presenta come un pannello con una foto a tutto schermo, impostiamo per gli elementi html e body un’altezza pari al 100%:

html,
body 
{
	height: 100%; 
}

Per quanto riguarda l’header, basterà dichiarare un posizionamento fisso e uno z-index elevato per porlo sempre in primo piano anche quando si scorrono le sezioni sottostanti:

.menu
{
	position: fixed;
	top: 0px;
	width: 100%; 
	height: 60px; 
	background-color: rgba(0,0,0,1.0);
	z-index: 100;
}

Passiamo alle sezioni. Come si ricorderà, a tutti gli elementi section è stata assegnata una classe slide. Nel CSS useremo questo selettore per riunire in una sola regola gli stili comuni a tutti pannelli. Eccoli:

.slide
{
	width: 100%;
	position: relative;
	padding: 150px 0;
	text-align: center;
}

Le regole cruciali, quelle necessarie per la realizzazione del risultato finale, sono le prime due: la larghezza di tutte le section deve essere del 100%, il posizionamento relativo. Il padding sul lato inferiore e superiore, così come la centratura del testo sono invece facoltativi e modificabili a piacere. Nei nostri esempi abbiamo usato questo padding tanto consistente in alto e in basso (150px) per dare spazio in altezza alle sezioni a prescindere dal contenuto che ospitano. L’alternativa, come vedremo, è di agire sulla proprietà height.

A questo punto non rimane che lavorare sulle singole sezioni. Quelle con il contenuto testuale sono la 2, la 4 e la 6. Le abbiamo unificate in un unico selettore, visto che nell’esempio hanno caratteristiche visuali identiche:

#slide2,
#slide4,
#slide6
{
	background-color:#ffffff;
	box-shadow: 0 18px 14px -14px rgba(0,0,0,0.6), 0 -18px 14px -14px rgba(0,0,0,0.6);
	z-index: 10;
}

Cosa c’è da osservare? A parte il colore di sfondo, si noti che è stata aggiunta un’ombreggiatura sul lato inferiore e su quello superiore, un effetto puramente decorativo che può naturalmente essere eliminato (o personalizzato). Se si usa la box shadow in questo modo, però, bisognerà pure assegnare uno z-index che sia superiore a quello delle altre sezioni ma inferiore a quello dell’header in modo tale che scorrendo la pagina le sezioni ‘passino sotto’ alla testata.

E veniamo alle sezioni con lo sfondo fotografico. Qui si tratterà di lavorare essenzialmente sulle proprietà relative al background.

La prima sezione si differenzia dalla terza e dalla quinta solo perché per essa impostiamo un’altezza del 100% per ottenere un effetto tutto schermo. Ecco gli stili:

#slide1
{
	height: 100%;
	background-image:url('../images/1.jpg');
	background-color:#fff;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

#slide3
{
	background-image:url('../images/2.jpg');
	background-color:#fff;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

#slide5
{
	background-image:url('../images/3.jpg');
	background-color:#fff;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

Posto che bisognerà scegliere immagini di una certa ampiezza (le nostre sono 1600x800px), lo sfondo non dovrà essere ripetuto (no-repeat), avere la proprietà background-size impostata su cover e, soprattutto, essere fisso (background-attachment: fixed): lo sfondo fisso è fondamentale per l’effetto parallax e richiesto dal plugin Javascript che useremo per ricrearlo.

Come si vede, la configurazione di base nel CSS non è complicata. Ecco cosa abbiamo finora ottenuto in questa demo che non presenta l’effetto parallax. Un risultato già comunque interessante.

Aggiungere l’effetto parallax, usiamo Stellar.js

Per ricreare l’effetto parallax bisogna necessariamente ricorrere a una soluzione Javascript. Tra i tanti script e plugin disponibili ci affidiamo a Stellar.js, anche perché, per quelle che sono le nostre necessità rispetto all’effetto finale, richiede una configurazione davvero minimale.

Dopo aver incorporato jQuery, da cui il plugin dipende, richiamiamo il plugin:

<script src="js/jquery.stellar.min.js"></script>

E procediamo alla sua semplice inizializzazione:

<script>
  jQuery(document).ready(function ($) {
   $(window).stellar();
  });
</script>

Basta richiamare il metodo stellar() usando come riferimento l’elemento che contiene gli oggetti a cui applicare l’effetto parallax. Per intenderci, usando window presumiamo che l’elemento sia la finestra del browser, ma potremmo anche definire un elemento in questo modo:

<script>
  jQuery(document).ready(function ($) {
   $('#container').stellar();
  });
</script>

Lo script così configurato cerca all’interno del documento tutti gli elementi per i quali si siano impostati degli attributi del tipo data-stellar-ratio o data-stellar-background-ratio. Il primo tipo si usa per un effetto parallax applicato agli elementi di qualsiasi tipo presenti nel documento, il secondo per un effetto applicato alle immagini di sfondo. Nelle nostre demo ci troviamo ad agire in questo secondo scenario. Pertanto, andiamo ad aggiungere in corrispondenza delle sezioni con gli sfondi l’attributo data-stellar-background-ratio:

<section class="slide" id="slide1" data-stellar-background-ratio="0.5">

<section class="slide" id="slide3" data-stellar-background-ratio="0.5">

<section class="slide" id="slide5" data-stellar-background-ratio="0.5">

Il valore assegnato all’attributo imposta il fattore di velocità nello scorrimento dell’elemento rispetto al resto della pagina. Un valore di 1 fa sì che l’elemento (o lo sfondo) scorra alla velocità naturale; scendendo sotto 1 si rallenta la velocità relativa; salendo sopra 1 si aumenta. Nel nostro caso si è optato per il valore 0.5.

Ecco cosa abbiamo ottenuto. Basta fare il confronto con la demo senza parallax per apprezzare le differenze nella resa visuale.

Stellar.js ha chiaramente molte altre opzioni di configurazione, ma se si tratta di applicare il parallax sulle immagini di sfondo i settaggi che abbiamo usato sono più che sufficienti.

Nella seconda parte dell’articolo vedremo come effettuare i ritocchi finali e come lavorare su mobile.

Se vuoi aggiornamenti su Pagina singola con effetto parallax inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Pagina singola con effetto parallax

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing