视差水平滚动

Question

我不知道从何说起。演示页面在这里：http://www.perandersen.no/sandbox/parallax/

我使用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);
}

我在脚本标记的开头将snowboarderPos设置为全局变量，以确保它是在任何事情发生之前设置的。在电梯对象上，我在这个版本中对其进行了硬编码。

编辑:在具有更快处理器的Chrome中工作得最好...因此需要对其进行优化。

Answer 1

而不是拥有：

element.css( "left", newXPos );

您是否尝试过：

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

Answer 2

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