抖动视差滚动

时间:2016-08-01 14:11:09

标签: javascript jquery css css3

我使用视差效果编写了一个网站,并且在抖动性能方面存在一些问题。

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

在滚动条上,使用包装盒上的滚动位置(仅在内部的视差背景)定位背景。使用CSS顶部位置在滚动事件上移动图像背景。图像有一个边距偏移,使图像保持静止的位置错觉。我已经启用了图形加速功能,并且在滚动时仍然会出现抖动。

正如我所知,CSS3变换比例不适用于固定位置。

还有其他解决方案吗?

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

2 个答案:

答案 0 :(得分:0)

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

background-attachment: fixed;

平滑视差网站的示例使用此功能,通常是在内容移动时保持背景静止的最佳方法。

答案 1 :(得分:0)

我相信页面资源也可以进行优化,以获得更好的页面性能。我注意到,当你的页面满载时,滞后似乎更少,所以我相信存在一个优化问题。

以下是我使用的分析链接,可以帮助解决其中一些问题:

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