视差效果的渲染问题答案

【问题标题】：Rendering issues with parallax-effect视差效果的渲染问题
【发布时间】：2012-04-30 21:14:25
【问题描述】：

我正在尝试使用 window.onscroll 和 scrollTop 创建视差效果，但我一直遇到渲染问题，看起来像是在渲染视口后收到了 onscroll。如您所见from this example（附代码）盒子的移动不稳定且不稳定。

所有基于 WebKit 的浏览器和 FireFox 的行为都是相同的。

JavaScript

$(document).ready(function() {
  $('.box').each(function() {
    $(this).data('y', $(this).offset().top);
  });
});

$(window).scroll(function() {
  var scroll = $(this).scrollTop();

  $('.box').each(function() {
    var parallax = $(this).data('parallax');

    if (parallax) {
      var y = $(this).data('y');
      var offset = (scroll - y) * parallax;

      $(this).css('-webkit-transform', 'translateY(' + offset + 'px)');
    }
  });
});

标记

<div class="red box">Lorem ipsum dolor sit amet.</div>
<div class="green box" data-parallax="0.4">Consectetur adipiscing elit.</div>
<div class="blue box" data-parallax="0.3">Nam consectetur dolor.</div>

【问题讨论】：

在 Chrome 11 和 FF 4 中对我来说看起来很流畅 - 但是除了第一个（红色）div 之外，我看不到很多视差效果。您是否尝试过使用setInterval 而不是监听滚动事件？
您使用的是什么操作系统？在 OSX SL 上有相当明显的抖动。

标签： javascript html css scroll parallax

【解决方案1】：

只是想知道是否值得使用预制的而不是“重新发明”轮子？

http://joelb.me/scrollpath/

【讨论】：