Jak odtworzyć nową stronę z logo eBay w HTML + CSS

Question

Miałem świetny pomysł na stronę internetową i myślę, że strona, którą serwis eBay stworzył dla jej nowego logo, jest bardzo interesująca. Zastanawiam się tylko, czy ktoś mógłby mi dać wgląd w sposób, w jaki można go odtworzyć.

http://pages.ebay.com/announcements/new/index.html

ja rodzaju zebrania, że ​​logo widać przez szczeliny jest ustawiony jako główny BG, stałe i odcinek przedni tylko przewija obok niego.

dwa główne pytania:

• Jak oni się „przodem” div aby wypełniał stronę
• Jak oni dostać BG zmienić podczas przewijania w dół strony.

Dzięki!

Answer 1

Jest to całkiem proste. Mają wiele obrazów tła, które są stosowane do wielu elementów section, a następnie zastosowały fixedbackground-attachment, aby tła były zawsze w tej samej pozycji. Wynikiem jest element, który w pewnym stopniu funkcjonuje jako maska ​​na tle.

Można naprawdę łatwo odtworzyć efekt i tak rozumiemy realizację z tego kodu:

HTML

<div></div> 
<div class="ebay-img1"></div> 
<div></div> 
<div class="ebay-img2"></div> 
<div></div> 
<div class="ebay-img3"></div> 

CSS

div { height: 600px; background-attachment:fixed; border-bottom: 1px solid black; } 
.ebay-img1 { background: black url("http://pics.ebaystatic.com/aw/pics/announcements/new/logo/logo-1.png") no-repeat 50% 0 fixed } 
.ebay-img2 { background: black url("http://pics.ebaystatic.com/aw/pics/announcements/new/logo/logo-2.png") no-repeat 50% 0 fixed } 
.ebay-img3 { background: black url("http://pics.ebaystatic.com/aw/pics/announcements/new/logo/logo-3.png") no-repeat 50% 0 fixed } 

Zobacz tutaj tego kod in situ: http://jsfiddle.net/CAMEn/

Answer 2

w źródle CSS oni wręczając zmieniający tło div i wypełnia, to nie jest ukryte, dzięki czemu można czuć się swobodnie patrzeć na nią i pobrać i grać z nim :)

Answer 3

„w tle” jest w rzeczywistości niektóre <section> znaczniki wstawione między rzeczywistymi elementami treści. Złudzenie, że jest to tło strony, jest osiągane przez określenie stylu background-attachment: fixed; dla elementów tła.