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.