使用Skrollr更改背景位置時圖像是動畫

我試圖做一個div，每滾動一次Xpx就更改背景圖像。最初我嘗試改變背景圖像（還有一個精靈和背景位置），但它給我一個「閃爍」的效果。你可以在這裏看到：https://whispering-ocean-4900.herokuapp.com/（這裏的例子不是用精靈來完成的，但效果是一樣的）。使用Skrollr更改背景位置時圖像是動畫

然後我試着只加載一次精靈，只改變背景位置。它工作正常，如果我使用類似的東西：中心左側;左上角等... 如果我使用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 /問題），但爲什麼當我改變背景位置（這將是一個很好的解決方法）做這個奇怪的事情？

非常感謝。

來源

2014-02-21 user41544

抱歉，我知道這是6個月前...

與第一代碼的問題是，它是用數字（對於PX的位置）和skrollr每個插值發現號。因此它激發了數字之間的變化，而不是從一個跳到另一個。

這是在skrollr的自述文件中，如果不想更改動畫，很容易防止。您只需加感嘆號在數字前面，像這樣......

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

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

來源

2014-09-15 15:26:18

使用Skrollr更改背景位置時圖像是動畫

回答

相關問題