css - CSS分层背景效果

我想不出更好的方法来问这个问题，所以我会直接问它。有人知道如何实现http://petenelson.co.uk的分层背景效果吗？也许有插件可以实现这一目标？

最佳答案

这就是所谓的视差效果
因此，只要是google for jQuery Parallax插件，您就可以使用它们。

经验法则是，您具有不同的z-index元素，这些元素在页面滚动事件期间以不同的速度移动。

如果查看此演示页面http://www.ianlunn.co.uk/plugins/jquery-parallax/，您将在其中包含的代码中看到：

<script src="scripts/jquery.parallax-1.1.3.js"></script>

和


$（document）.ready（function（）{
    $（'＃nav'）。localScroll（800）;

    //.parallax(xPosition、speedFactor、outerHeight）选项：
    // xPosition-元素的水平位置
    //惯性-相对于垂直滚动移动的速度。示例：0.1是滚动速度的十分之一，2是滚动速度的两倍
    // outerHeight（true / false）-jQuery是否应使用它的externalHeight选项来确定节在视口中的时间
    $（'＃intro'）。parallax（“ 50％”，0.1）;
    $（'＃second'）。parallax（“ 50％”，0.1）;
    $（'。bg'）。parallax（“ 50％”，0.4）;
    $（'＃third'）。parallax（“ 50％”，0.3）;

}）



以下是一些有用的链接：


http://medleyweb.com/web-dev/15-useful-jquery-parallax-plugins-and-tutorials/
http://www.tripwiremagazine.com/2012/07/parallax-scrolling.html




更新：

视差效果不仅可以用于滚动。实际上，这取决于您的想象力和创造力。例如，如果将鼠标移到此视差插件演示http://stephband.info/jparallax/#parallax的图像上，您将看到分层图像以不同的速度移动。