jquery - 如何构建一个视差滚动，其中背景图像一旦滚动到并且内容移动

Question

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

想法？

Answer 1

我认为您正在寻找的是背景附件样式。

这是一个展示概念的 fiddle 。

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