新颂网站 - 滚动时从一个背景图像平滑过渡到下一个背景图像

Hillsong Website- Transitioning from one background image to the next smoothly whilst scrolling

本文关键字：背景 一个 图像平滑 过渡到 图像 下一个 网站 滚动 新颂      更新时间：2023-09-26

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

我该怎么做？目前我一直在网上搜索，但我是编码和编程的新手，我需要很多帮助。这是我到目前为止所做的：（有人可以帮我吗，谢谢）

如何获得背景影响？

这是一个快速简单的 CSS 示例，我用这个效果放在一起： JS 小提琴

.HTML 

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

.CSS

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

对于更高级的视差滚动技术，我建议查看一些教程，例如：

https://ihatetomatoes.net/simple-parallax-scrolling-tutorial/

http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641

相关文章：