滚动时向下翻页的页面...它是如何工作的？

Question

我已经用谷歌搜索了一段时间，但根本找不到答案。所以，我的问题是：这样的网站如何

http://tasag.de/

工作？向下滚动时，内容框后面会显示几个背景图像。当您向上和向下滚动时，您会看到它们占据整个屏幕，但有时您可以同时看到其中两个，一个在屏幕下方，一个在屏幕下方。这是如何运作的？我根本想不出来。

非常感谢

Answer 1

如果您查看其中一个背景的CSS，您会找到关键声明：

background-attachment: fixed;

这意味着即使用户滚动，背景也不会移动，允许您可以使用不同的滚动div并且背景总是看起来固定

我准备了一个粗略的小提琴：http://jsfiddle.net/3UpUb/

.container2 p{
    background-image: url(http://tasag.de/wp-content/uploads/2014/01/img-3-blur.jpg);
    background-repeat: repeat;
    background-position: center top;
    background-size: auto;
    background-attachment: fixed;
}

Answer 2

您可以使用视差滚动并将speed放到0。然后图像保持固定，但滚动到下一个背景图像时会改变。

我使用了Parallax plugin。