IE7-8中的Jerky Parallax
我已经在我正在开发的网站中引入了基本的视差效果。 它在Chrome,Firefox和IE9中运行顺畅; 但它在IE7和IE8中真的很生涩。 我看过更复杂的网站,我看不到像我那样的“急躁”。 我只使用两个顶部有扫描线纹理的图像。
可能导致这种情况的任何想法?
#intro { background: url(../img/graphics/top-bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-width: 1024px; min-height: 768px; height: 100%; position: relative; } #second { background: url(../img/graphics/content-bg-2.jpg) center no-repeat fixed; position: relative; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-width: 1200px; min-height: 768px; height: 4800px; }
任何帮助表示感谢,谢谢。
请检查此设置(在评论中) 如何通过Javascript检查浏览器平滑滚动支持? 。
如果它被禁用 – 这是正常的。
据我所知,这是http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/的例子,而不是你的代码。 如果平滑滚动被禁用 – 它具有“生涩”效果(我已禁用平滑滚动是Chrome,Opera和IE8)。
滚动原因的原因。 如果禁用此设置 – 它的工作方式类似于永久性+ 100px 。 如果它被启用 – 它每50ms工作10次,每次+ 10px 。
UPDATE
为了获得更多性能,您可以执行以下操作
-
编写自己的代码而不插件
-
根据当前的scrollTop间隔构建事件调用,而不是每次滚动调用
-
在开头缓存jquery节点
-
主要原则 – 减少节点操作=提高性能
我在jquery上写了类似的效果 – 你可以在这里看到它http://www.thecommoditycode.com/ambersoftware/并使用它原理
一些可能的方案:
http://www.franckmaurin.com/how-to-make-mouse-wheel-scroll-smooth-in-windows-os/这是专门针对Windows的
和Firefox的可能解决方案: http : //blog.keithclark.co.uk/faster-scrolling-parallax-websites-in-firefox/
我知道这是不好的发布链接,但我没有时间测试这些,所以不能提供任何建议,甚至他们的工作。
我知道回答这个问题有点晚了,但它可能会对未来的人有所帮助 – 问题在于你正在使用:
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
要使视差全屏后面的图像,你需要使用另一种方法。
删除此代码,您的视差将是可爱和平滑的。