Come si crea questo effetto di immagine?

Question

Ho guardato questa pagina per qualche tempo. Incredibile, davvero. Ma non posso dire come l'effetto di immagine di sfondo che accade su opere di scorrimento. Sono passati attraverso il codice trovato che stanno utilizzando jQuery, più una serie di plugin scorrimento, ma nulla circa le immagini che posso vedere.

Come direbbe che si fa?

Il sito: http://herohousing.org/UBBT/

Answer 1

Questo trucco è molto semplice e ha solo bisogno di un po 'di CSS in cui ogni pannello ha un'immagine di sfondo che è fisso:

<style type="text/css">
    div {
        height: 100%;
        background-image: url(http://sstatic.net/so/img/logo.png);
        background-attachment: fixed;
        border: thin solid;
    }
    div.a {
        background-repeat: repeat-x;
        background-color: #FDD;
    }
    div.b {
        background-repeat: repeat-y;
        background-color: #DFD;
    }
    div.c {
        background-repeat: no-repeat;
        background-color: #DDF;
    }
</style>

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

Qui sto usando la stessa immagine di sfondo, ma il colore di sfondo diverso e l'immagine di ripetizione dovrebbe mostrare che si tratta di tre elementi diversi.

---

Modifica Ok, sembra che qualche dubbio di quello che sto scrivendo. E infatti, il sito citato utilizza jQuery per questo. Ma solo per adattare l'immagine per la larghezza e l'altezza della finestra del browser dal momento che non è possibile dimensione immagine di sfondo ancora. CSS 3 specifica un background-size proprietà ma il suo supporto è ancora (browser basati Gecko come Firefox) di proprietà utilizzando il venditore prefisso specifico come -khtml- (Konqueror), -moz-, -o- (Opera) e -webkit- (browser basati su WebKit come Safari).

Se è possibile astenersi da questo, è possibile utilizzare la tecnica CSS vi ho mostrato.

Answer 2

E '4 div un'immagine di sfondo diverso per ciascuno, ciò che rende il lavoro di effetto particolarmente bene è il "background-attached: fixed;" con proprietà per fermare lo scorrimento sfondo.

Se si scarica Firebug per Firefox, è possibile ispezionare i div e osservare come il CSS rende la pagina si comportano e tentare di replicare in prima persona.

Davvero piacevole effetto cercando devo ammetterlo: -)