Creare un sito Parallax

Cosa sono i siti web con parallax

Parallax non e' una parola inglese , ma deriva dal greco e vuole dire alterazione.
Quando si parla di parallax si intende una modalita' “alterata” di scorrimento delle pagine web.
In sostanza scorrendo la pagina con il mouse dall’alto al basso (e viceversa ovviamente) i vari elementi grafici che compongono il layout si muovono creando straordinari effetti di profondita' e 3D. Oggi questa tecnica e' possibile con il codice html e soprattutto CSS.

Come creare un sito Parallax

. E piuttosto semplice. Il codice html e’ :

<pre class="language-markup" >
<code class="language-markup" style="color:yellowgreen" >
<div id="home" class=”home” >
<h3 >Fotografie e esperienze</h3 >
<p >...... scritte in sovraimpressione.... </p  >
</div >

Mentre Css e':

#home {
background: url(../path/img.jpg) no-repeat center center fixed;
position: relative; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Cioe’ con l’istruzione background si imposta la immagine che fara' da sfondo e si determina la posizione con le istruzioni : - -

position: relative/fixed ;
background-size: cover;

Siti web con parallax scrolling: vantaggi per l’utente finale
Uno dei vantaggi piu' evidenti dei siti web con parallax scrolling e' dubbio la novigazione di navigazione dell’utente che in questo modo diventa piu' coinvolgente e interattiva

Quando usare la tecnica Parallax

E’ una tecnica molto accattivante utile soprattutto per i siti vetrina,oppure per una pagina iniziale. In un sito web con molti contenuti si potrebbe avere una pagina iniziale “leggera” , con il minimo di animazioni, per poi proseguire nelle pagine iniziali. Il sito che segue , mostra un esempio.

Anteprime sito Parallax