JSFiddle - React, Tailwind, and code Playground

by Anatol

HTML

<script src="http://rc-design.at/fileadmin/template/rcdesign/js/jquery.backgroundPosition.js"></script>
<div id="background">
    <div id="midground">
        <div id="foreground">
      
        </div>
    </div>
</div>

CSS

#background {
  background: url(http://www.rcdesign.w4yserver.at/images/background1.gif) repeat 5% 5%;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index:1;
}

#midground {
  background: url(http://www.rcdesign.w4yserver.at/images/midground1.gif) repeat 20% 20%;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index:1;
}

#foreground {
  background: url(http://www.rcdesign.w4yserver.at/images/foreground1.gif) repeat 90% 110%;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index:2;
}

JavaScript

$(function() {

    // Bugfix-Patch
    jQuery.fx.step.backgroundPosition=function(fx) {
      if (fx.init && typeof fx.end==='string') {
        var start=jQuery.fn.css.call( [fx.elem], 'backgroundPosition' );
        start = toArray(start);
        fx.start = [start[0], start[2]];
        var end = toArray(fx.end);
        fx.end = [end[0],end[2]];
        fx.unit = [end[1],end[3]];
      }
      var nowPosX = [];
      nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
      nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];           
      fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
      
      function toArray(strg){
         strg = strg.replace(/left|top/g,'0px');
         strg = strg.replace(/right|bottom/g,'100%');
         strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
         var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
         return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
      }
    };

    
    var anim1 = { i1: 0, i2:0 },
        anim2 = { i1: 0, i2:0 },
        anim3 = { i1: 0, i2:0 };
    
    
    var min = $('#midground');
    var forg = $('#foreground');
    var back = $('#background');

      min.css({backgroundPosition: '0px 0px'});
      forg.css({backgroundPosition: '0px 0px'});
      back.css({backgroundPosition: '0px 0px'});
    
    setInterval(function(){
        anim1.i1 += 3;
        anim1.i2 += 1;
        min.animate({backgroundPosition:"(-"+anim1.i1+"px -"+anim1.i2+"px)"},{duration:50});
    },10);
    
   setInterval(function(){
        anim2.i1 += 2;
        anim2.i2 += 1;
        forg.animate({backgroundPosition:"(-"+anim2.i1+"px -"+anim2.i2+"px)"},{duration:10});
    },10);
    
    setInterval(function(){
        anim3.i1 += 5;
        anim3.i2 += 1;
        back.animate({backgroundPosition:"(-"+anim3.i1+"px -"+anim3.i2+"px)"},{duration:150});
    },10);

});