1

Im working on my finals project and what I want to happen is to make the character walk while you scroll using skrollr.js here's what I have so far is a sprite animation it walks continuously and I don't know how to make it walk just when you start scrolling it:

<section id="top">
    <div id="back">
        <div id="move">      
            <div id="walk"></div>
        </div>
    </div>
</section>

CSS

#back{
    width: 100%;
    height: 100%;
    background: url(../images/bgg.png) repeat-x bottom;
    background-size: contain;
    position: absolute;
    bottom: 0;

    animation: parallax_bg 20s cubic-bezier(0.37, 0.24, 1, 1) infinite;}

#move{
    width: 100%;
    height: 100%;
    position: relative;

    animation: move 50s linear infinite;}


#walk{
    width: 185px;
    height: 100%;
    background: url(../images/spritess.png) no-repeat;
    position: absolute;
    top: calc(50% - 200px);
    left: calc(50% - 179px);

    animation: walk 1.1s steps(4) infinite;}


@keyframes walk{
    100%{
        background-position: -790px 0;
    }
}

@keyframes move{
    0%{
        transform: translateX(-50%);
    }
    100%{
        transform: translateX(100%);
    }
}


@keyframes parallax_bg {    
  0% { 
    background-position: 1465px 100%;
} 

  100% {
     background-position: 50px 100%; 
} 

0 Answers0