这个问题与视差无关,而与滚动事件无关。我对我的项目最关心的是视差滚动效果是平滑的而不是紧张的。
那么我的问题是,某些属性的动画/滚动效果是否比其他属性更好?例如,背景位置比在滚动时调整边距顶部效果更好。
这个问题与视差无关,而与滚动事件无关。我对我的项目最关心的是视差滚动效果是平滑的而不是紧张的。
那么我的问题是,某些属性的动画/滚动效果是否比其他属性更好?例如,背景位置比在滚动时调整边距顶部效果更好。
我不确定某些属性在制作动画时是否会比其他属性产生更少的开销,但如果有人发布有关该主题的一些好的信息,我会非常感兴趣。话虽如此,我确实知道一些可以帮助提高性能的事情。
设置position : absolute
会从页面的常规流程中移除元素,因此在设置动画时不需要重新绘制整个页面。position : relative
将强制重绘整个页面,因为祖先和后代元素可能会受到影响。
此外,您可以限制scroll
事件并仍然达到 30fps:
var scroll_ok = true;
setInterval(function () {
scroll_ok = true;
}, 33);//33ms is 30fps, you can try changing this to something larger for better performance
$(window).bind('scroll', function () {
if (scroll_ok === true) {
scroll_ok = false;
//now run your code to animate with respect to scroll
}
});
更新 :: 2014-08-26
自从最初编写后,情况发生了变化。一些快速说明:
现代浏览器现在尝试使用 GPU 加速给定一组特定属性的元素绘制(opacity
而且transform
我想不到)。使用这些属性可以大大提高性能,例如top
/ left
(这也需要在更多的实例中重绘页面而不是使用 a transform
)。
will-change
是浏览器刚刚获取的新属性。您基本上可以设置可能更改的属性列表,以便浏览器可以提前优化属性更改。
requestAnimationFrame
具有强大的 polyfill 和良好的现代浏览器支持。这是一种更好的方式来平滑地为元素设置动画,而不会创建大量的“块”,因为浏览器会尽可能地渲染。