0

我正在尝试做一个 div 来更改每个滚动的 X px 的背景图像。最初我尝试更改背景图像（也使用精灵和背景位置），但它给了我“闪烁”的效果。你可以在这里看到：https ://whispering-ocean-4900.herokuapp.com/ （这里的例子不是用精灵做的，但效果是一样的）。

然后我尝试只加载一次精灵并仅更改背景位置。如果我使用类似的东西，它工作正常：左中；左上角等...如果我使用 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 的一个错误/问题），但是为什么当我改变背景位置（这将是一个很好的解决方法）时会做这个奇怪的事情？

非常感谢您。

4

1 回答 1

1

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

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

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

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

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

于 2014-09-15T15:26:18.883 回答