JSFiddle - React, Tailwind, and code Playground

by Tintu Raju

HTML

<div id='body'></div>
<div id='anim'></div>

<span id='t'>0</span>

CSS

#anim{
  background: url(http://specials.manoramaonline.com/Festival/2017/xmas/img/mm-cmas-carol-group-sequence.png);
  width:290px;
  height:167px;
}

#body{
 position:absolute;
 height:100%; width:100%;
  background:url(http://specials.manoramaonline.com/Festival/2017/xmas/images/mm-cmas-bg-2.jpg);
}

JavaScript

$(document).ready(function(){


     var _i = 21;
     var _x = 0;
     var _bg_left = 0;
     
 
 $('body').on('keypress', function() {
     moveBg();
});


     
     
     function moveBg(){
      _bg_left = _bg_left-2;
      $("#body").css({"position":"fixed","top":"0px","width":"100%", "background-position-x":_bg_left});
       // setTimeout(moveBg,100);
     
     }
     
     function moveAhead(){
     
        _i = _i==0?21:_i-1;
        _x = (_i*293)+1;

        $("#anim").css({"bottom":"0px", "position":"fixed","background-position":_x+"px 0px"});
        setTimeout(moveAhead,100);
        $("#t").html(_x+"px")
				 
      }
      
 moveAhead();
 moveBg();
 
})