固定的背景滾動效果

Question

簡短的問題：如何用CSS實現這種滾動效果？ - >

http://focuslabllc.com/

我已經嘗試過這樣的：

#one { 
    background: url(http://images.buzzillions.com/images_products/07/02/iron-horse- maverick-elite-mountain-bike-performance-exclusive_13526_100.jpg); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment:fixed; 
} 

#two { 
    background: url(http://img01.static-nextag.com/image/GMC-Denali-Road-Bike/1/000/006/107/006/610700673.jpg); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment:fixed; 
} 

謝謝！ :)

Answer 1

它被稱爲「窗簾揭示」，但在這種情況下，它反過來。 http://www.thecssninja.com/css/reveal-effect

本質上的第一個「滑」位於「下面」所有其他的內容，並設置爲position: fixed說z-index: 1和所有其它的都設置爲position: relative和z-index: 10

http://jsfiddle.net/3n1gm4/8gDDy/

代碼

所以將

HTML

<div class="slide1">CONTENT</div> 
<div class="slide2">CONTENT</div> 

CSS

.slide1 { 
    position: fixed; 
    z-index: 1; /* sets it below the other slides in the layer stack */ 
    height: 100% 
} 
.slide2 { 
    position: relative; 
    z-index: 10; /* sets it above .slide1 */ 
    margin-top: 100%; /* this pushes it below .slide1 in the scroll */ 
    height: 100% /* full length slides */ 
} 

*這是快速完成，並可能不是100％準確，但爲了給大家介紹什麼在那裏發生的一個基本思路。

Answer 2

好吧，你可以用CSS來做到這一點。

HTML

<div class="main">Sample text/div> 
<div class="reveal-me-holder"></div> 
<div class="reveal-me">Revealed</div> 

CSS

body { 
    margin:0; 
} 
.main { 
    height: 700px; 
    position:relative; 
    z-index: 2; 
    background: red; 
} 
.reveal-me { 
    height: 500px; 
    position:fixed; 
    bottom:0; 
    width:100%; 
    background: black; 
    color:white; 
} 
.reveal-me-holder { 
    height: 500px; 
} 

這jsfiddle顯示結果。