Esempio Sito Parallax

Ho gia' descritto cosa e' un sito Parallax nella sezione codice Parallax
Ecco nel dettaglio come e' stato costruito il sito.

Fra i framework utilizzati:

• bootstrap
• fancybox

---

Il menu utilizzato e' il classico bootstrap nav Depurato dal menu a tendina

L’effetto parallax, si applica a 3 Id:

• id="home" immagine iniziale
• id="viaggi" Sezione Viaggi
• id="footer"Parte finale

L’istruzione css, contenuta nel file style.css e' ad esempio

#home {
background: url(../immagini/parigi.jpg) no-repeat center center fixed;
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:white;
}

Da notare

• Background url Immagine di background
• Display: table mostrare l’elemento come una tabella
• Position: relative posizione della immagine
• Background-size: cover; l’immagine copre lo schermo
• webkit, moz, o per rendere applicabile l’istruzione background-size sui diversi browser: chrome, mozilla, opera.