如何實現滾動後水平條背後的視差

Question

我已經看到這種效果幾次了，但我找不到它的「名稱」 - 它叫什麼？這種效應背後的基本理論是什麼？它使用純CSS，還是主要由JS驅動？

說明：

當用戶滾動垂直向下的頁面，在純色背景讓位，點菜「curtain reveal」，背景圖像。然而，另一個水平條不是直接到達頁面的底部，而是以與之前的「純色背景」相同的速度移動，從底部覆蓋背景圖像。隨着用戶繼續滾動，固體背景再次讓位於背景圖像，但是這次背景已變爲其他圖像。效果類似於魔術師在物體前揮動手或物體，物體發生某種程度的變化。

另一種說法是，固體背景中存在「空白」，但可以看到不同的背景圖像。

下面是一個例子，我發現（搜索好位之後）：http://www.astoriacassis.com/
（忽略了「畫廊」式的頂部旋轉圖像向下滾動，並注意池的圖片，然後後來一盞燈與大象在一起）

最初我以爲它可能類似於parallax effect，但它實際上似乎有很大的不同。

我以前見過這種效果，我想知道如何複製它。

Answer 1

這是通過在移動divs時利用背景附件屬性來實現的，該效果可以使圖像看起來發生變化，而實際上它只是簡單地向上滾動屏幕上的兩個divs。

看看這個CodePen一個演示：http://codepen.io/anon/pen/sCuvI/

的重要部分：

HTML

<div class="content"> 
    Lorem Ipsum 
</div> 
<div id="s1" class="scroll"></div> 
<div class="content"> 
    Lorem Ipsum 
</div> 
<div id="s2" class="scroll"></div> 

CSS

.scroll 
{ 
    width: auto; 
    height: 200px; 
    /*The important part*/ 
    background-attachment: fixed; 
    background: no-repeat center center fixed; 
    /*Stretch the background*/ 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -ms-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}