使用skrollr在滚动上行走循环

时间:2017-12-13 06:11:30

标签: javascript animation sprite css-sprites skrollr

我正在进行我的决赛项目,我想要发生的是在你使用skrollr.js进行滚动的时候让角色走路。到目前为止我所拥有的是一个精灵动画,它不断地走路而且我不会&#39 ;当你开始滚动它时,我知道如何让它走路:

<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 个答案:

没有答案