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设置为脚本标签开头的全局，因为它在发生任何事情之前设置。在Elevator对象上，我在此版本中对其进行了硬编码。

编辑：使用更快的处理器在Chrome中效果最佳......因此需要进行优化。

Answer 1

而不是：

element.css( "left", newXPos );

你试过了吗？

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

Answer 2

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

视差滚动水平

2 个答案: