jQuery通过滚动逐渐改变背景图像

Question

我在java中不是很好。我猜这个问题对专业人士来说也不容易。

正如标题所示，我正在尝试通过使用jQuery滚动来逐步找到如何更改背景图像的解决方案。

背景应该是敏感的。

我发现网站有类似的内容sojournnetwork.com

因为我不喜欢java和jquery，所以jsfiddle例子会很好！

提前致谢

Answer 1

我认为这是满足您需求的完美教程。

http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/

这是教程的结果：

http://ianlunn.co.uk/plugins/jquery-parallax/

Answer 2

背景图片不会改变，只是固定。

div.background {
background-image:url(xxx);
background-attachment: fixed;
}

每个“新”图像都是一个像其他人一样滚动的容器div。 这样的事情必须奏效。

Answer 3

我相信这种效果通常被称为“视差”。您可能会发现以下一些示例很有用：

• http://wagerfield.github.io/parallax/
• http://stolksdorf.github.io/Parallaxjs/

您还可以在谷歌搜索单词“Parallax”，并找到一些不需要外部库的简单脚本（如果需要）。我确实找到了this JSFiddle，它也可能有用。我相信它使用以下方法来设置背景：

background: url(http://www.webdesignermagazine.nl/files/2012/06/golf.jpg) 50% 0 no-repeat fixed;