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

jQuery Change Background image gradually by scrolling

本文关键字：背景 图像 滚动 jQuery      更新时间：2024-04-16

我在java方面不是很好。不过，我想这个问题对专业人士来说也不太容易。

正如标题所说，我正试图找到一个解决方案，如何通过使用jQuery滚动来逐渐更改背景图像。

背景应该是有反应的。

我发现一个网站有一个类似的东西逗留网络。

由于我不是java和jquery的专业人士，一个jsfiddle的例子会很好！

提前感谢

我认为这是一个非常适合您需求的教程。

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

这是教程的结果：

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

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

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

每个"新"图像都是一个容器div，它像另一个容器一样滚动。这样的东西一定行得通。

我相信这种效果通常被称为"视差"。你可能会发现以下一些例子很有帮助：

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

你也可以在谷歌上搜索单词"Parallax"，找到一些不需要外部库的简单脚本（如果需要的话）。我确实发现这个JSFiddle可能也有帮助。我相信它使用以下设置背景：

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