Ho guardato questa pagina da un po 'di tempo. Incredibile, davvero. Ma non posso dire come funziona l'effetto dell'immagine di sfondo che si verifica sullo scroll. Sono passati attraverso il codice trovato che stanno usando Jquery più un certo numero di plugin a scorrimento, ma nulla sulle immagini che posso vedere.Come viene creato questo effetto immagine?
Come diresti che è stato fatto?
Il sito: http://herohousing.org/UBBT/
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 diverso colore di sfondo e la ripetizione dell'immagine dovrebbero mostrare che si tratta di tre diversi elementi.
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 alla larghezza e all'altezza della finestra del browser poiché non è ancora possibile ridimensionare un'immagine di sfondo. CSS 3 specifica un background-size property ma il suo sostegno è ancora di proprietà utilizzando il prefisso fornitore specifico come -khtml- (Konqueror), -moz- (browser basati Gecko come Firefox), -o- (Opera) e -webkit- (browser basati su WebKit come Safari).
Se ti puoi astenere da ciò, puoi usare la tecnica CSS che ti ho mostrato.
Hai dimenticato di usare JQuery per assegnare immagini su '.a',' .b' e '.c' div. –
@The Elite Gentleman: Perché dovrei usare jQuery quando esiste una semplice soluzione CSS? E i DIV * hanno * un'immagine di sfondo. – Gumbo
Ma continuano a fare qualcosa con JS. Se disattivo JS, non viene mostrata alcuna immagine di sfondo. –
Sono 4 div con un'immagine di sfondo diversa per ciascuno, ciò che rende particolarmente efficace l'effetto è il "background-attached: fixed;" proprietà per interrompere lo scorrimento dello sfondo.
Se scarichi Firebug per Firefox, puoi controllare i div e osservare come il CSS rende la pagina si comporta e tenta di replicarla per te.
davvero piacevole effetto cercando devo ammettere :-)
molto interessante, si tratta di una pagina che ci vorrà del tempo per disect ... ma molto cool. – Zoidberg
Perché il tag jQuery? Per un sacco di cose non è necessario alcun javascript. – Dykam