滾動時如何在單杠后獲得視差

Question

我已經看過幾次這種效果，但是我找不到它的“名稱”-它叫什么名字？ 這種效應背后的基本理論是什么？ 它使用純CSS還是主要由JS驅動？

描述：

當用戶垂直向下滾動頁面時，純色背景（如“ 窗簾揭露 ”）將背景圖像取代。 然而，不僅僅是水平到達頁面的底部，還有另一個水平條，其以與先前的“純背景”相同的速度移動，從底部覆蓋了背景圖像。 隨着用戶繼續滾動，純色背景再次讓位於背景圖像，但是這次背景已更改為其他圖像。 這種效果類似於魔術師在對象面前揮舞着他或她的手，並且該對象以某種方式發生了實質性變化。

另一種表達方式是，在純色背景中存在“空白”，但是可以看到不同的背景圖像。

這是我找到的示例（經過大量搜索）： http : //www.astoriacassis.com/
（ 忽略頂部的“畫廊”式旋轉圖像。向下滾動並注意池中的圖片，然后看到上面放着大象的燈。 ）

最初，我認為這可能與視差效果類似，但實際上似乎有很大的不同。

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

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