javascript - 当使用 Skrollr 改变背景位置时，图像是动画的

Question

我正在尝试做一个 div，它在滚动的每个 X 像素处更改背景图像。 最初我尝试更改背景图像(也使用 Sprite 和背景位置)，但它给了我一个“闪烁”的效果。 你可以在这里看到它:https://whispering-ocean-4900.herokuapp.com/ (这里的例子没有用 sprite 完成，但效果是一样的)。

然后我尝试只加载一次 Sprite 并只改变背景位置。 如果我使用类似这样的东西，它会工作得很好: center left;左上角等... 如果我使用 px，例如 background-position: 50px 0px; 它会为图像设置动画(移动它)。 你可以在这里看到它:http://bit.ly/1h4FOVR

我已经这样做了:

<div 
  style="
    width: 600px; 
    height: 1000px; 
    position: static; 
    background: url('./Testapp_files/merry1.png'); 
    background-position: 50px 0px;
  " 
  data-0="background-position: 150px 0px;" 
  data-150="background-position:500px 0px;" 
  data-250="background-position: 25px 0px;" 
  data-350="background-position: 0px 0px;" 
  class="skrollable skrollable-between"></div>

相反，如果我这样做(但我不能为真正的 Sprite 做):

<div 
  style="
    width: 600px; 
    height: 1000px; 
    position: static; 
    background: url('file:///Users/ste/Downloads/Archivio/Testapp_files/m./Testapp_files/merry1.jpg'); 
    background-position: top left;
  " 
  data-0="background-position: top right;"  
  data-150="background-position: center left;" 
  data-250="background-position: top right;" 
  data-350="background-position: top left;" 
  class="skrollable skrollable-between"></div>

一切正常...有什么区别？我该如何解决？？

闪烁的问题很难解决(在互联网上阅读，是 webkit 的错误/问题)，但是为什么当我更改背景位置时(这将是一个很好的解决方法)做这个奇怪的事情？

非常感谢。

Answer 1

抱歉，我知道这是 6 个月前的...

第一个代码的问题是它使用数字(对于 px 位置)并且 skrollr 插入它找到的每个数字。因此，它为数字之间的变化设置动画，而不是仅仅从一个跳到另一个。

这在 skrollr 自述文件中，如果您不想更改动画，则很容易避免。你只需在数字前加上一个感叹号，就像这样......

data-0="background-position: !150px 0px;"

这是 skrollr 自述文件中的信息:- https://github.com/Prinzhorn/skrollr/blob/master/README.md#preventing-interpolation