Skrollr-是否可以使用Sprite並更改滾動位置？

Question

我有一個背景圖像，其中有4個角色在不同步行位置的圖像。

使用Skrollr滾動時是否可以每0.5秒移動精靈位置（假設在x坐標上移動150px）？ 想要給它一個步行的效果，但是只能在滾動上。

也許還有另一種方法可以達到這種效果？ 非常熱衷於僅使用Skrollr，因為我過去曾經使用過並且喜歡它！

Answer 1

到目前為止，我設法實現這一目標的唯一方法是在完全橫向的畫布類型上創建圖像精靈，以便在X軸上更改所有圖像，然后使用skrollr樣式表（ 單擊此處查看github ）進行應用滾動動畫。

首先制作一個Skrollr.css文件。 確保在鏈接標記中包含“數據滾動器樣式表”。

<link href="css/skrollr.css" rel="stylesheet" data-skrollr-stylesheet>

在body結束標記之前，先添加skrollr樣式表min js文件，再添加skrollr JS。 見下文。

<script type = "text/javascript" src="dist/skrollr.stylesheets.min.js"></script>
<script type = "text/javascript" src="js/skrollr.js"></script>

為了讓您入門，我已經簡單地演示了skrollr樣式表的外觀。

.div-name {
    -skrollr-animation-name: animation1;
}

@-skrollr-keyframes animation1 {
    500 {
        background-position: 0px;
    }

    600 {
        background-position: -100px;
    }
}

動畫中的數字是相對於瀏覽器窗口頂部的。 從窗口頂部開始600px，背景位置將在X軸上移動-100px。

我目前正在嘗試找出如何刪除滾動上的過渡/滑塊效果。 我個人希望圖像按需更改而不是滾動。 希望我的指導給您一些開始，如果我想出了如何在不進行過渡的情況下立即更改圖像的方法，那么我將在此處進行擴展。 祝項目順利。

Answer 2

我設法通過添加自定義緩動來在skrollr中包括逐幀精靈動畫。 根據我的直覺，Math.round將返回某種方波，並且令人驚訝地它起作用了（但是請注意，我不確定其背后的數學原理）：

var s = skrollr.init({ 
    easing: {
        frames: function(p) {
            return Math.round(Math.sin(p) * 50);
        }
    }
});

此自定義緩動將：在沒有任何插值的情況下循環播放動畫，以免獲得臭名昭著的“滑動”而不是動畫。

之后，您可以通過這種方式在CSS上調用動畫（請注意，我使用的是skrollr樣式表，但沒有理由為什么它也不能直接與html數據標簽一起使用）：

.animation{
    display: block;
    width: 208px; /*your sprite width*/
    height: 227px; /*you sprite height*/
    background-image: url(yourspritesheet.png);
    background-position: 0px 0px;
    -skrollr-animation-name: youranimation;
}

@-skrollr-keyframes youranimation{
    start{background-position-x[frames]:0px;}
    end{background-position-x[frames]:208px;}
}

在此示例中，spritesheet是水平的，208px是sprite的寬度。 該代碼將以208px的步長通過spritesheet，並在到達末尾時從頭開始。 在Chrome，Firefox和Safari上進行了測試。 您可以在此處（學校項目）找到結果的示例： http : //www.sartirani.it/daniele/scroll/public_html/