我正在尝试创建一个可以拍摄4张图像的视差效果，当您向下滚动页面时，4幅图像开始叠加在一起。以下是这个汉堡在Smokey Bones Website汇集在一起的视觉示例。这是一个比我需要尝试提供一些视觉洞察力要复杂得多的例子。我非常精通Javascript，Jquery等等，只需要一些想法如何开始这个关于数学部分或任何例子的过程。
答案 0 :(得分：2)
这是一个展示基本理念的小提琴：http://jsfiddle.net/reblace/z8P56/1
我只是使用线性函数进行图像偏移：
$("#img1").css({top: (scroll)*100 + 'px' });
显然，你可以通过这种方式变得更加复杂。理想情况下，您应该从页面本身获取页面高度等内容，而不仅仅是硬编码。
另外需要注意的是，真正的视差公式更复杂，涉及三角学以及从视图位置绘制的对象的相对距离和角度。我在示例中使用的线性函数是一种简化，您可以为Web目的而放弃这种简化。
基本上，你想根据价值领域和一系列价值来考虑它......即。滚动位置从0到5000px，我想要的图像从0到100px。因此，如果域是[0,5000]并且范围是[0,100]，我将域映射到0到1的范围，然后将其扩展为从0到100，即。 imagePos =（scrollPos / 5000）* 100
如果我想将0-5000的滚动位置映射到10-50的图像位置，我必须缩放并移动前一个公式，即。 imagePos =（scrollPos / 5000）* 40 + 10
您可以通过在缩放和移位之前反转0-1比例来反转滚动（从50到10），即。 imagePos =（1 - （scrollPos / 5000））* 40 + 10
我认为你可以通过玩这些例子来获得你想要的效果。
更新：这是一个稍微复杂的小提琴，其评论使用更强大的方法来计算正确的滚动范围和窗口高度。此外，这个演示了图像的反向滚动：http://jsfiddle.net/reblace/z8P56/4。