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

Question

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

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.

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!

Answer 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.

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

<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.

<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.

.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.

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.

Answer 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):

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):

.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/