当使用Skrollr更改背景位置时，将对图像进行动画处理

Question

我正在尝试做一个div，它会在滚动的每个X px处更改背景图像。 最初，我尝试使用更改背景图像（还具有精灵和背景位置），但是它给了我“闪烁”的效果。 您可以在这里看到它： https : //whispering-ocean-4900.herokuapp.com/ （此处示例未使用sprite完成，但效果相同）。

然后，我尝试仅加载一次精灵，并仅更改背景位置。 如果我使用类似的方法，它会很好： 左上方等...如果我使用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>

相反，如果我这样做（但我不能为真正的精灵做）：

<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