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

I have a background image that has 4 images of a character in different walking positions.

我有一个背景图像,有4个不同行走位置的角色图像。

Is it possible on scroll with Skrollr to move the sprite position (let's say by 150px on the x co-ordinate) every 0.5 seconds? Want to give it a walking effect but only on scroll.

是否有可能在使用Skrollr滚动时每0.5秒移动精灵位置(让我们说x坐标上的150px)?想要给它一个步行效果,但只能滚动。

Maybe there's another way to achieve this effect? Quite keen on only using Skrollr as I've used it in the past and LOVE it!

也许有另一种方法来实现这种效果?非常热衷于仅使用Skrollr,因为我过去曾经使用它并且喜欢它!

2 个解决方案

#1

The only way I've managed to achieve this so far is by creating a sprite of images on a completely landscape canvas type so that all of the images are changed upon the X-Axis then using skrollr stylesheets (click here for github) to apply the animation upon scroll.

到目前为止,我设法实现这一目标的唯一方法是在完全横向画布类型上创建一个图像精灵,以便在X轴上更改所有图像,然后使用skrollr样式表(单击此处获取github)来应用滚动时的动画。

Start by making a Skrollr.css file. Be sure to include the 'data-skrollr-stylesheet' to the link tag.

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

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

Right before the closing body tag, include the skrollr stylesheet min js file followed by the skrollr JS. See below.

在关闭正文标记之前,包括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>

To get you started I've placed a simple demo of what your skrollr stylesheet should look like.

为了帮助您入门,我已经放置了一个简单的演示,了解您的skrollr样式表应该是什么样子。

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

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

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

The numbers in the animation are relative to the top of the browser window. 600px from the top of the window, the background-position will move -100px on the X-axis.

动画中的数字相对于浏览器窗口的顶部。从窗口顶部600px,背景位置将在X轴上移动-100px。

I am currently trying to figure out how to remove the transition/slider effect on scroll. Personally I'd like the images to change on demand rather than scroll. I hope my instruction has given you something to start with and if I figure out how to change the image instantly without the transition, I will expand on this here. Good luck with the project.

我目前正在试图找出如何删除滚动过渡/滑块效果。就个人而言,我希望图像能够按需更改,而不是滚动。我希望我的指导给你一些开始的东西,如果我想出如何在没有过渡的情况下立即改变图像,我将在此处进行扩展。祝这个项目好运。

#2

I managed to include frame-by-frame sprite animation in skrollr by adding a custom easing that does the trick. Math.round in my intuition would return sort of a square wave and surprisingly it worked (but be aware, I'm not sure about the math behind it):

我设法通过添加自定义缓动来在skrollr中包含逐帧精灵动画。我的直觉中的Math.round会返回一个方波,但令人惊讶的是它有效(但要注意,我不确定它背后的数学):

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

This custom easing will: loop your animation without any interpolation so that you don't get that infamous "sliding" instead of the animation.

这个自定义缓动将:循环你的动画而不进行任何插值,这样你就不会得到臭名昭着的“滑动”而不是动画。

After that you call the animation on css this way (please note I'm using skrollr stylesheet but there's no reason why it shouldn't work directly with html data tags as well):

之后你就这样用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;}
}

In this example, the spritesheet is horizontal and 208px is the sprite width. The code will go through the spritesheet at steps of 208px and start from the beginning when it reaches the end. Tested on Chrome, Firefox and Safari. You can find an example of the result here (school project): http://www.sartirani.it/daniele/scroll/public_html/

在此示例中,spritesheet是水平的,208px是精灵宽度。代码将以208px的步长通过spritesheet,并在结束时从头开始。在Chrome,Firefox和Safari上测试过。你可以在这里找到一个结果的例子(学校项目):http://www.sartirani.it/daniele/scroll/public_html/

#1