Question

有一个专门有这种效果的网站，我想知道是否有人可以指出我想要达到类似效果的好教程。该网站是http://www.royalsalute.com/en/whisky。我想知道如何让背景图像div保持在顶部，让内容滚动到页面，然后让用户到达那里后将新的背景图像粘在顶部...

思考？

Answer 1

我认为您正在寻找的是背景附件风格。

这里有一个小提琴，显示了这个概念。

http://jsfiddle.net/Lq7zH/

基本上你把你的副本放在另一个父div中，然后你设置父div的背景图像，background-size：cover和background-attachment：fixed;

所以HTML

<div class="sticky-div">
  <p>Lots of copy here or other divs or whatever</p>
</div>

CSS

.sticky-div {
  background-image: url(someimage.jpg);
  background-size: cover // ensures it fills the space
  background-attachment: fixed // Makes the background static, as in it doesn't scroll

如何构建视差滚动，其中背景图像保持滚动一次并且内容移动

1 个答案: