Javascript Hillsong网站-滚动时从一个背景图像平稳过渡到下一个背景图像

嗨，我想创建一个网站，类似于这个 从某种意义上说，向下滚动页面会导致书写/信息向上滚动，但随后会显示一个新的背景图像，该图像与以前的不同，并且是固定的

我该怎么做？ 目前我一直在网上搜索，但是我对编码和编程还不熟悉，我需要很多帮助。这就是我到目前为止所做的：（谁能帮我一下吗，谢谢）

---

如何获得背景效果？

下面是一个简单的CSS示例，我将其与此效果结合起来：

HTML

对于更高级的视差滚动技术，我建议查看以下教程：

---

这就是所谓的视差滚动效果，也许这会对您的搜索有所帮助。@aarosil视差滚动不是这样的。

<div id="one"></div>
<div class="break">Break space</div>
<div id="two"></div>
<div class="break">Break space</div>

<div id="three"></div>
<div class="break">Break space</div>

<div id="four"></div>

div {
    height: 100%;
    width: 100%;
    margin: 0;
}
#one {
    background: #000 url('http://upload.wikimedia.org/wikipedia/commons/1/12/Sling-Sat_removing_space_debris.png') fixed no-repeat center;
    background-size: cover;
}
#two {
    background: #000 url('http://wallpoper.com/images/00/44/96/51/spaceships-in-space-2_00449651.jpg') fixed no-repeat center;
    background-size: cover;
}
#two {
    background: #000 url('http://wallpoper.com/images/00/44/96/51/spaceships-in-space-2_00449651.jpg') fixed no-repeat center;
    background-size: cover;
}
#three {
    background: #000 url('http://www.nss.org/tourism/SpaceShipTwo-1600.jpg') fixed no-repeat center;
    background-size: cover;
}