抖动视差滚动

Question

我写了一个网站，使用视差效果，并有一些抖动性能的问题。

页面已使用CSS3变换缩放，并在调整大小时，使用JavaScript / jQuery自动调整页面大小。

在滚动上，使用包装盒上的滚动位置来定位背景(仅限于内部的视差背景)。使用CSS顶部位置在scroll事件上移动图像背景。图像具有边距偏移，以使其具有图像保持静止的位置的错觉。我已经启用了图形加速，但在滚动时仍然会得到抖动的图像。

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

还有其他解决方案吗？

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

Answer 1

你有没有试过用css修复背景：

background-attachment: fixed;

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

Answer 2

我相信页面资源也可以优化，以获得更好的页面性能。我注意到当你的页面完全加载时，延迟似乎更小，所以我认为这是一个优化问题。

以下是我使用的分析链接，应该会对其中的一些内容有所帮助：

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