W jaki sposób tworzony jest ten efekt obrazu?

Question

Od pewnego czasu patrzę na tę stronę. Niesamowite, naprawdę. Ale nie mogę powiedzieć, jak efekt tła działa przy przewijaniu. Przeszedłem przez kod, który stwierdził, że używają Jquery plus wiele przewijanych wtyczek, ale nic o obrazach, które widzę.

Jak możesz powiedzieć, że to zrobione?

Witryna: http://herohousing.org/UBBT/

Answer 1

Ta sztuczka jest bardzo prosta i po prostu potrzebuje trochę CSS, gdzie każdy panel ma obraz tła, które jest ustalane:

<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> 

Tutaj używam samo tło, ale różne kolory tła i powtórzenia obrazu powinny pokazać, że są to trzy różne elementy.

---

Edit Ok, to wydaje się, że pewne wątpliwości co piszę. I faktycznie, cytowana strona używa do tego jQuery. Ale tylko po to, aby dopasować obraz do szerokości i wysokości okna przeglądarki, ponieważ nie można jeszcze zmienić rozmiaru obrazu tła. CSS 3 określa numer background-size property, ale jego obsługa jest nadal prawnie zastrzeżona za pomocą prefiksu specyficznego dla dostawcy, takiego jak -khtml- (Konqueror), -moz- (przeglądarki oparte na Gecko, takie jak Firefox), -o- (Opera) i -webkit- (przeglądarki oparte na WebKit, takie jak Safari).

Jeśli możesz powstrzymać się od tego, możesz użyć techniki CSS, którą ci pokazałem.

Answer 2

Jest to 4 elementy div z różnymi obrazami tła dla każdego, co sprawia, że ​​efekt działa szczególnie dobrze, to "tło dołączone: naprawione;" Właściwość, aby zatrzymać przewijanie w tle.

Jeśli pobierasz Firebuga dla Firefoksa, możesz sprawdzić div i obserwować, jak CSS zachowuje się na stronie i usiłować ją zreplikować.

Naprawdę ładny efekt muszę przyznać :-)