Question

我试图逐渐改变滚动中两个不同元素的不透明度：第一个（文本）应该向上移动并淡出，而第二个（背景）应该淡入。代码I＆＃到目前为止，我已经做了很多工作并做了我期望它做的事情，但是动画在Chrome和Firefox中肯定不够流畅（Safari似乎能更好地处理它）。

JS：

var scroll = window.requestAnimationFrame ||
             window.webkitRequestAnimationFrame ||
             window.mozRequestAnimationFrame ||
             window.msRequestAnimationFrame ||
             window.oRequestAnimationFrame ||
             // IE Fallback
             function(callback){ window.setTimeout(callback, 1000/60) };

var lastPosition = -1;
var textdiv = $('#text');
var BG = $('#bg');

function animateBG(){  

  scrollTop = window.pageYOffset;
  if (lastPosition == scrollTop) {
    scroll(animateBG);
    return false;
  } else { lastPosition = scrollTop; }

  scroll(animateBG);

  if (scrollTop <601) {
    var opacity = 1-(scrollTop/600);
    textdiv.css('-webkit-transform',"translate3d(0px, " + -(scrollTop/4) + "px, 0px)").css('opacity', opacity);
    BG.css('opacity', 1-opacity);
  }
}

HTML：

<div id="foo">
  <div id="bg"></div>
  <div id="text">Yada yada</div>
</div>

如果我只保留文字的动画而不在背景上进行不透明度的改变，那么事情仍然保持平滑。然而，当我在背景div上添加不透明度变化时，动画在Chrome和Firefox中变得崎岖不平，而在Safari中则不太流畅（虽然可以接受）。

我在某处读到Safari倾向于对数字进行舍入。是什么让它运行脚本更顺畅？如果是这样，我应该对opacity变量进行舍入，以及如何？

谢谢！

更新：

Fiddle.当父div #foo具有位图背景（我希望它具有）时，动画似乎只是颠簸：我尝试将#foo的背景设置为纯色，并且动画再次流畅。： - /

更新2：我对普通背景错了。我用我的实际页面尝试过它，并没有改变任何东西。大小似乎很重要：我给#bg一个更小的尺寸，动画更顺畅。不过，我真的要100％宽，100％高。

滚动时平滑背景不透明度变化

0 个答案: