实现简单的视差:图像"跳跃"在Firefox和Safari中

时间:2017-01-23 19:05:03

标签: javascript html css parallax

我有以下用例:

  1. 两个内容元素与中间的图像
  2. 图片应始终显示为整体(与contain - background-size - 属性的值相关)
  3. 此行为在所有视口中应相同,从而导致图像缩放(但始终完全可见)
  4. 滚动时,每个图像都应该正常滚动到顶部
  5. 一旦图像到达顶部,视差效应应该启动
  6. 您可以在此处查看我的实施: http://codepen.io/AvantiC/pen/BpReza

    它在Chrome中效果很好,滚动和视差看起来非常流畅。但是当我在Firefox或Safari中测试页面时,图像表现为"跳跃" /"生涩" (不确定这里是否有正确的词;))。

    我不确定它是否是Firefox / Safari的一个问题,或者我的实现是否有问题,而且Chrome在某种程度上是在内部弥补它。

    也许有人可以指出我正确的方向。 :)

    问候, AvantiC

1 个答案:

答案 0 :(得分:0)

不是每帧都设置图像位置,而是尝试更改CSS,以便在用户滚动到某个点后图像保持静止。