1

我们的网站上有视差滚动。
它很简单，每边有 4 层，根据线性函数以不同的速度滚动。

但是，它并不像我想要的那样顺利，尤其是当我打开多个标签时。
您注意到滚动和视差图像更新之间的轻微延迟以及帧速率降低。

小屏幕上的帧率要好得多（我正在开发 27 英寸屏幕），但我想在所有屏幕上获得最佳性能。

这是设置滚动的代码：

win = $(window)
footerHeight = $('footer').height()
win.scroll ->
  scroll = win.scrollTop()
  baseTop = 183 - scroll - 6*scroll/footerHeight
  for layer in [0..7]
    el = parallaxLayers[layer].element
    top = parseInt(baseTop - scroll * (10 + layer % 4 * 30)/footerHeight)
    left = parallaxLayers[layer].left
    el.style.backgroundPosition = "#{left}px #{top}px"

这是 CoffeeScript，但我希望它对大多数 JS 开发人员来说足够简单。

我已经做的事情：

  • 预取所有元素，以便可以在函数中立即访问它们。
  • 预取，background-position-x因此不需要每次迭代都获取它。
  • 由于开销增加，请勿使用 jQuery 设置样式。
  • 尽可能少地计算所有内容（因此baseTop）

每一层都是静态定位的，所以它们不会抖动，我确保修改背景位置，这样我就不会导致页面重排。

还有什么我可以尝试的吗？

由于性能与屏幕大小成比例，我相信这是一个渲染问题，而不是 JS 问题。也许一些花哨的 CSS3 可能会有所帮助？

4

1 回答 1

3

我最终改用了画布。这给人一种更流畅的感觉。

于 2012-03-08T19:14:56.700 回答