多方向和多图像，视差滚动答案

【问题标题】：Multi-directional and Multiple image, parallax scrolling多方向和多图像，视差滚动
【发布时间】：2011-07-06 12:05:35
【问题描述】：

我正在创建一个基于“桌面”设计的网站，换句话说，就是一个页面，其中 div 页面分布在整个页面中。

我正在使用 scrollTo 进行导航，并且在导航动画期间，我希望背景上方的图像进行视差滚动以帮助获得深度和运动的感觉。

此时我已经使用了许多插件，但没有找到可以提供我正在寻找的东西，所有图像都将在页面的各个区域具有起始位置和不同的速度，因此我需要能够在页面加载时设置位置。可能会有大量（ish）图像需要这样做。

我在这方面已经很久了，现在我必须使用你们 互联网天才来拯救我！

【问题讨论】：

您能否发布一些精简的 HTML，让我们了解页面的布局方式？

标签： javascript jquery scroll jquery-animate parallax

【解决方案1】：

视差滚动相当简单，不需要插件，尽管您可以轻松地将其附加到 $.fn 以使其成为 jQuery 插件：

<img src="foo.jpg" id="parallax1" class="parallax">

<style>
.parallax {
    position : fixed;
    top      : 0px;
    left     : 0px;
}
</style>

<script>
var scroller = $('#parallax1');
$(window).bind('scroll', function(){
   var top = this.scrollTop;
   $('#parallax1').css('top', top * someMultiplier);
});
</script>

【讨论】：