如何避免视差性能问题？

Question

我尝试创建视差效果，但在Edge和Safari中存在严重的性能问题。有人请告诉我，我怎么能避免这个问题？

示例：https://github.com/bashkos/Problem-parallax

Answer 1

使用transform: translate( ... )而不是设置bottom和co。设置transform会有所帮助，因为浏览器会渲染一个与其余部分分开的新绘图层。

使用position: fixed并计算围绕该事实的所有值似乎更好，因为无论当前滚动位置如何，图像始终处于相同位置。这当然意味着您还需要知道何时使其可见。

旁注：我想你的意思是resize中的window.addEventListener('recise', ...)