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/