Question

我有一张背景图片，其中包含4个不同行走位置的角色图像。

是否可以使用Skrollr滚动每0.5秒移动精灵位置（让x坐标为150px）？想要给它一个步行效果，但只能滚动。

也许有另一种方法可以达到这种效果？非常热衷于仅使用Skrollr，因为我过去曾经使用它并且喜欢它！

Answer 1

到目前为止，我设法实现这一目标的唯一方法是在完全横向画布类型上创建一个图像精灵，以便在X轴上更改所有图像，然后使用skrollr样式表（{{3} }）在滚动时应用动画。

首先制作一个Skrollr.css文件。请务必在链接标记中包含“data-skrollr-stylesheet”。

<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);
        }
    }
});

此自定义宽松将：循环你的动画，没有任何插值，这样你就不会得到臭名昭着的＆＃34;滑动＆＃34;而不是动画。

之后你用这种方式用css调用动画（请注意我使用skrollr样式表，但没有理由说它也不应该直接使用html数据标签）：< / p>

.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是精灵宽度。代码将以208px的步长通过spritesheet，并在结束时从头开始。在Chrome，Firefox和Safari上测试过。您可以在此处找到结果示例（学校项目）：http://www.sartirani.it/daniele/scroll/public_html/

Skrollr - 是否可以使用精灵并更改滚动位置？

2 个答案: