Un sito Parallax
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.