Javascript 视差水平滚动

我不知道从哪里开始。演示页面如下：

我使用jQuery和scrollTo插件。然后我将一个函数附加到window.onscroll。抱歉有点乱，但请帮我优化一下。我是JavaScript新手：

function scroll()
{
 var xPos = window.pageXOffset;


 var element = $("#wrapper");
 var newXPos = Math.abs(xPos /1.1);
 element.css( "left", newXPos );

 element = $("#snowboarder");
 var newXPos = Math.abs(xPos /1.5) + snowboarderPos.left;
 element.css( "left", newXPos );

 element = $("#elevator");
 var newXPos = Math.abs(xPos /1.9) + 2800;
 element.css( "left", newXPos );

  var element = $("#ballong");
 var newXPos = Math.abs(xPos /1.2) + balloonPos.left;
 element.css( "left", newXPos );

// $("#xpos").text(window.pageXOffset);
}

我在脚本标记som taht的开头将滑雪板类设置为全局，它是在任何事情发生之前设置的。在电梯对象上，我在这个版本中硬编码了它

编辑：在具有更快处理器的Chrome中效果最好。。。因此需要对其进行优化。

而不是：

element.css( "left", newXPos );

您是否尝试过：

element.stop().animate( {left:newXPos}, 200 );

---

使它看起来更具响应性的一种可能方法是向正在滚动的元素添加-moz transition-duration css属性。如果只有几个元素，将持续时间设置为0.33秒或类似的设置可能会使它看起来更快。

您到底遇到了什么问题？@JeffreySweeney您是否查看了该链接？在FF中的浏览器上滞后。在速度较慢的计算机上也是如此。我不确定Per-Øivin Andersen是否在查找错误.element.stop（）.animate（{left:newXPos}，0）；创建所需的效果，但不使用200。但在FF中仍然非常滞后。同意；使用jQuery的

animate（）

函数，而不是自己制作这些元素的动画（它们已经过优化）。如果你需要在游戏的下一步“移动”中“重置”东西，还有一个停止功能来清除所有动画。@Aaron这和我说的有什么不同。200只是一个例子，试试20-50对不起，20-50只在FF中还是比较滞后。或者至少在FF中是这样。我不知道不同的操作系统和Safari。IE还可以，但手动滚动时滚动速度非常慢…这一个似乎使所有东西都“挂在后面”，然后它会在稍后赶上滚动。但是谢谢你的意见。如果我稍微扩展一下解决方案，这可能会有所帮助，所以我会记住这个技巧。