1. Home
  2. tutor
  3. Web
  4. Parallax
  5. codice Parallax

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.