背景图像的微妙变化
我一直试图通过谷歌找到答案一段时间但无济于事。
我在网站上遇到了一个有趣的function： http ： //dicksonfong.com/
该function涉及背景图像，当一个部分向上通过屏幕时，该图像似乎从底部变化。 我无法更好地描述它，这可能就是为什么我没有在谷歌上点击。
任何人都可以识别出这个技巧被调用了什么，以及在哪里可以找到实现类似内容的源代码？
提前致谢。
西蒙
这称为Parallax效果滚动。 它在UI方面看起来非常有创意，并且涉及很多工作。 如果你想开始，这是一个开始的理想例子 。
希望这可以帮助。
有一个很好的JavaScript库叫做skrollr用于制作视差滚动网站。
它要求您只知道HTML和CSS 。
更多例子 。
关于视差的上述答案是不正确的。 Parallax确实创造了一些令人惊叹的网站。 但是，您链接到的那个（ http://dicksonfong.com/ ）不会使用它。 这是因为当一个人有多个级别以不同的速度移动时会发生视差。
想象一下，滚动的速度是100％。 如果图像随整个页面移动，它将以100％移动。 如果它根本不移动，它将以0％移动。 如果它移动半速，50％。 视差包含多种移动速度。 Dickson的网站只有内容，移动率为100％，背景为100％或0％。 由于0％表示不动，因此移动物品的移动速度只有一个。
也就是说，它仍然是一个很酷的网站，因为它更简单，它更容易创建，需要零javascript（或HTML5）。 他只是使用固定背景和绝对定位。 他的第一排和第三排有固定的背景。 这允许它们保持在原位。
示例代码：
HTML：
First Page
Content here! Divider First Page
Content here.
CSS：
body{ margin:0; padding:0; font-size:80px; font-family:Calibri; font-weight:bold; text-align:center; text-shadow:0px 0px 4px white; } .page { margin: 0 auto; width: 100%; max-width: 1920px; position: relative; height: 800px; } .divider { height: 300px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; } .page .content { height: 450px; top: 100px; position: absolute; width: 100%; } .divider .content { padding-top:50px; height: 250px; position: absolute; width: 100%; } #home { background: url(background_home.jpg) no-repeat fixed 50% 0 / cover; } #about { background: url(background_about.jpg) no-repeat fixed 50% 0 / cover; }
工作示范： http ： //jsfiddle.net/6Hck4/1/