CSS分层背景效果

Question

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

Answer 1

这称为视差效果 所以只需google获取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) options:
    //xPosition - Horizontal position of the element
    //inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
    //outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
    $('#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上的图像上，您将看到分层图像以不同的速度移动。