4

正如标题所示，我使用的是 Stellar.js。我只有一个视差元素，而且非常简单。这是一个带有背景图像的部分。背景图像设置为固定（就像文档说要避免抖动），但图像仍然抖动 - 在 Chrome 中有些抖动，在其他浏览器中非常糟糕。当我删除固定的 CSS 时它也不会改变。

这是元素：

<!--Testimonial Section-->
    <section id="testimonial" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="-900">
      <div class="container">
        <div class="row">
          <div class="span3 margin-30">
            <img src="img/testimonial-img.png" alt="Title">
          </div>

          <div class="span9">
            <h2>“Lava has been an asset to our company by providing us with a cutting edge look and a web presence that shows off our work and skills.”&lt;/h2>
            <div class="testimonial-source pull-right">Jeff | Ceo - Creative Company</div>
          </div>
        </div>
      </div>
    </section>

这是CSS：

#testimonial {
  background: url(../img/studio-10.jpg) no-repeat center;
  background-size: 2000px 2000px;
  background-attachment: fixed;
  padding-top: 120px;
  padding-bottom: 120px;
}

很简单。有什么建议吗？

4

4 回答 4

1

问题最终是一个图像标签，它与视差滚动中涉及的背景图像位于同一 div 中。删除此图像后，抖动停止。

于 2013-08-01T14:34:08.283 回答
0

您是否尝试过使用较小的图像？Stellar 演示中使用的那些较小（1280x640px）并且没有该background-size属性。尝试使用较小的图像和/或不使用该background-size属性 - 这可能会导致这些性能问题。

于 2013-07-12T21:42:06.170 回答
0

尝试这个

#testimonial {
  background: url(../img/studio-10.jpg) no-repeat 50% 0 fixed;
  width: 2000px; 
  height: 2000px;
  padding-top: 120px;
  padding-bottom: 120px;
}
于 2013-07-23T12:48:34.953 回答
0

我知道这是一个老问题，但正在改变$.stellar()or $(window).stellar();：

$.stellar({
  hideDistantElements: false
});

为我解决了闪烁的问题。

于 2018-11-09T03:00:57.460 回答