JSFiddle - React, Tailwind, and code Playground

by fatelei

HTML

<div id="liukanshan" class="monsters">
</div>

CSS

.monsters {
    background-image: url('https://raw.githubusercontent.com/fatelei/fatelei-hexo-blog/master/source/images/splash.png');
    background-repeat: no-repeat;
    height: 680px;
}

#liukanshan {
    width: 820px;
}

JavaScript

$(document).ready(function () {
        var target = $('#liukanshan');
        var total = 48;
        var cur = 0;
        var width = 0;
        var height = 0;
        var fps = 80;
        var now;
        var elapse;
        var then = 0;
        var draw = function () {
          requestAnimationFrame(draw);

          now = new Date();
          elapse = now.getTime() - then;

          if (elapse > fps) {
            then = now.getTime();
            if (cur > 48) {
              cur = 0;
              width = 0;
              height = 0;
            }

            if (cur && cur % 10 === 0) {
              height = height - 680;
              width = 0;
            } else {
              width = width - 820;
            }

            target.css('background-position', width + 'px ' + height + 'px');
            cur++;
          }
        };
        draw();
      });