0

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

任何帮助表示赞赏，谢谢。

4

2 回答 2

0

请检查此设置（在评论中）如何通过 Javascript 检查浏览器平滑滚动支持？.

如果它禁用 - 这是正常的。

据我了解，此http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/是示例，而不是您的代码。如果平滑滚动被禁用 - 它具有“生涩”效果（我禁用平滑滚动是 Chrome、Opera 和 IE8）。

滚动原理中的原因。如果此设置被禁用 - 它就像永久 +100px一样工作。如果启用 - 它每 50 毫秒工作 10 次，每次 +10px。

更新

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

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

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

  • 在开头缓存jquery节点

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

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

于 2012-07-29T12:47:37.230 回答
-1

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

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

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

删除此代码，您的视差将变得可爱而流畅。

于 2013-04-17T23:31:40.407 回答