杰基帕拉克斯在IE7-8

Jerky Parallax in IE7-8

本文关键字：IE7-8      更新时间：2024-04-07

我已经在我正在开发的网站中引入了一个基本的视差效果。它在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。

更新

为了获得更高的性能，您可以执行以下操作：

  • 编写自己的代码，无需插件

  • 基于当前滚动顶部间隔构建事件调用，而不是基于每个滚动调用

  • 在开始时缓存jquery节点

  • 主要原理-更少的节点操作=更高的性能

我在jquery上写过类似的效果-你可以在这里看到http://www.thecommoditycode.com/ambersoftware/并使用它的原理

我知道现在回答这个问题有点晚了，但它可能会在未来帮助人们-问题是你使用的是：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

要使视差后的图像全屏，你需要使用另一种方法。

删除这个代码，你的视差将是可爱和平滑的。

相关文章：