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的一个bug /问题），但是为什么当我改变背景位置时（这将是一个很好的解决方法）做这个奇怪的事情？ / p>

非常感谢你。

Answer 1

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

第一个代码的问题是它正在使用数字（对于px位置），而skrollr会对它找到的每个数字进行插值。因此，它可以激活数字之间的变化，而不仅仅是从一个数字跳到另一个数字。

这是skrollr自述文件，如果您不希望更改动画，则很容易防止。你只需在数字前加一个惊叹号，就像这样......

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

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

使用Skrollr更改背景位置时，动画图像

1 个答案: