抖动视差滚动

Jittery parallax scrolling

本文关键字：滚动视差抖动更新时间：2023-09-26

我写了一个使用视差效果的网站，但在抖动性能方面存在一些问题。

页面已使用CSS3转换比例缩放，在调整大小时，会使用JavaScript/jQuery自动调整页面大小。

在滚动上，使用包装盒上的滚动位置定位背景（视差背景仅在内部）。使用CSS顶部位置在滚动事件上移动图像背景。图像有一个边缘偏移，使其产生图像位置保持静止的错觉。我已经启用了图形加速，并且在滚动时仍然会得到抖动的图像。

正如我发现的，CSS3变换比例在位置固定的情况下不起作用。

还有其他解决方案吗？

Jittery视差网站：http://5starprmarketing.prosoftwareuk.co.uk/p/1750平滑视差网站：http://northeastexpo.co.uk/

您是否尝试过使用css修复背景：

background-attachment: fixed;

平滑视差网站的例子使用了这一点，通常是在内容移动时保持背景静止的最佳方法。

我相信页面资源也可以进行优化，以获得更好的页面性能。我注意到，当你的页面完全加载时，滞后时间似乎更短，所以我认为存在优化问题。

这是我使用的分析链接，应该有助于其中的一些：

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fnortheastexpo.co.uk%2F&tab=桌面