水平视差滚动

我不知道从哪里开始。演示页面在这里：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作为一个全球性的脚本标签索姆年初taht任何happends之前它被设置。在电梯对象上，我已经在这个版本中硬编码了。

编辑：用更快的处理器在Chrome中效果最好......所以需要进行优化。

来源

2011-12-06 Piddien

您遇到的问题到底是什么？ –

@JeffreySweeney你看过链接吗？主要滞后于FF浏览器的 – locrizak

。而且在较慢的电脑上。 – Piddien

而是具有：

element.css("left", newXPos);

你尝试过：

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

来源

2011-12-06 14:01:12 locrizak

element.stop（）。animate（{left：newXPos}，0）;创造了期望的效果，但没有200.但FF仍然非常滞后。 – Piddien

同意;而不是自己动画这些元素，使用jQuery的'animate（）'函数（它们已经被优化）。如果您需要为游戏中的下一个“移动”“重置”事物，还有一个停止功能来清除所有动画。 –

@Aaron和我说的有什么不同。 200只是一个例子尝试20-50 – locrizak

一种可能的方式，以使它看起来更加敏感是一个-moz-过渡期的CSS属性添加到元素正在滚动。如果只有几个元素，将持续时间设置为0.33s或类似的东西可能会使其看起来更快。

来源

2011-12-06 14:05:07

这个似乎让所有的东西都“悬在”后面，然后它会在稍后的时间内滚动，但是要感谢你的输入，PS。这可能有助于我扩展解决方案，所以我会牢记这个诀窍。 – Piddien

水平视差滚动

回答

相关问题