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

Creating an effect where a background image scrolls at a different rate to the page content

本文关键字：速度 滚动 图像 背景 一种 创建      更新时间：2023-09-26

谁能给我解释一下我怎么才能创建一个效果像https://www.spotify.com/us/请点击了解更多在这个页面

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

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

谢谢!

你链接到的效果被称为"视差滚动"。有许多网站和插件描述了如何实现这一点:

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

这是视差效果，

视差是沿着两条不同的视线观看物体的视位置的位移或差异，用两条视线之间的角度或半倾角来测量。当从不同的位置观察时，附近的物体比远处的物体有更大的视差，所以视差可以用来确定距离。

检查此站点和插件

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

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

请随意使用，我总是愿意接受建议。

相关文章：