0

到目前为止，我已经创建了一个水平滚动站点，该站点对元素背景图像具有视差效果（拉伸以适应视口的大小）。我已经使用了Stellar.js库来实现效果；

$.stellar({
    horizontalScrolling: true,
    verticalScrolling: false,
    horizontalOffset: $(window).width()
});

但是，我面临两个问题；

  1. 在元素完全消失之前，图像往往会“耗尽”；显示下面的白色背景。这种影响的严重程度取决于视口的大小和形状，所以我猜想试图弄清楚图像大小、纵横比或定义的滚动比所涉及的数学是不值得的。有没有办法让 Stellar 中的滚动比率“自动”，这样背景就永远不会“用完”（或者是否有替代的视差库可以做到这一点）？
  2. 无论浏览器和机器，效果的表现都惨不忍睹。删除background-size: cover似乎有所改善，但还不够“足够”；使用img元素会提高背景图像的性能吗？这是一个巨大的变化和一种混乱的方式，但如果它修复了滞后的滚动，那将是值得的。

提前致谢！

4

1 回答 1

1

正如@Shivam 建议的那样，请改用 skrollr.js 。我有这个完全相同的问题。请参阅： 填充容器的视差背景图像

Skrollr.js 将起始偏移设置为 0，因此即使背景设置为封面，您也不会在图像下方获得该空间。

这是我在我的网站上使用的教程：http: //ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/。说明中唯一缺少的是，在第 1 步中，您还需要包含示例文件附带的 imagesloaded.js 文件。希望有帮助！我花了几天的时间试图找到解决方案！

于 2014-03-11T01:00:10.967 回答