创建一种效果，其中背景图像以不同的速率滚动到页面内容

Question

有人可以解释我如何创建像https://www.spotify.com/us/这样的效果请点击此处了解详情。

它看起来像3D效果。例如：图像不像滚动那样移动。如果我们在页面上有两个段落，在第一段下面有第二段，那么第二段在第一段之前会快速移动。

任何指导如何创建这些效果或者如果有任何Jquery插件，那么它也会这样做。

谢谢！

Answer 1

您所关联的效果被称为“视差滚动”。有许多网站和插件描述了如何实现这个：

• http://jonraasch.com/blog/scrolling-parallax-jquery-plugin
• http://abduzeedo.com/super-easy-parallax-effect-jquery
• http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/

Answer 2

这是视差效应，

  

视差是沿着两条不同视线观察的物体的视在位置的位移或差异，并且通过这两条线之间的角度或半角度来测量。当从不同位置观察时，附近物体具有比更远物体更大的视差，因此可以使用视差来确定距离。

检查SITE 和PLUGIN

Answer 3

我在自己的网站上做了一个非常基本的视差效果。

$(window).scroll(
    function() {
        x = $("html").scrollTop() * -.05;
        $(".bg_img").animate({top: x + "px"}, 0);
}); 

随意使用这个，我总是乐于接受建议。