javascript - 创建背景图像以与页面内容不同的速率滚动的效果

Question

任何人都可以请解释我如何创建像https://www.spotify.com/us/这样的效果请单击在此页面上了解更多信息。

它看起来像一个3D效果。例如：图像不会像滚动条那样移动。如果我们在页面上有两个段落并且在第 1 段下面有第 2 段，则第 2 段在第 1 段之前移动得很快。

任何指南如何创建这些效果，或者如果有任何 Jquery 插件，那么它也可以。

谢谢！

score 2 · Accepted Answer

您链接到的效果称为“视差滚动”。有许多网站和插件描述了如何实现这一点：

score 0 · Accepted Answer

那就是视差效应，

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

score 0 · Accepted Answer

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

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

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

3 回答 3