JSFiddle - React, Tailwind, and code Playground

HTML

<div id="companyKalevaWindowPreWrapper">
            <div id="companyKalevaWindowWrapper">
                <div id="companyKalevaWindowPic"></div>
                <div id="companyKalevaPanoramaPic"></div>
            </div>
        </div>

CSS

#companyKalevaWindowPreWrapper {
margin: 0 auto;
width: 893px;
padding-right: 2%;
}
#companyKalevaWindowWrapper {
position: relative;
width: 893px;
height: 298px;
overflow: hidden;
}
#companyKalevaWindowPic {
position: absolute;
left: 0;
top: 0;
width: 893px;
height: 298px;
background: url('http://www.kaleva-ru.ru/images/company/kaleva-window.png') no-repeat;
-background: url('http://www.kaleva-ru.ru/images/company/kaleva-window.gif') no-repeat;
z-index: 2;
}
#companyKalevaPanoramaPic {
position: absolute;
left: 0;
top: 0;
margin-top: -30px;
width: 893px;
height: 298px;
background: url('http://www.kaleva-ru.ru/images/company/kaleva-panorama.jpg') no-repeat;
z-index: 1;
}

JavaScript

function CompanyPanoramaController() {
  this.DoInit()
}
CompanyPanoramaController.prototype = { 
  X_OFFSET_MAX:72,
  Y_OFFSET_MAX:70,
  _wrapperOffsetX:0,
  _wrapperOffsetY:0,
  _xOffsetStep:0,
  _yOffsetStep:0,
  _lastX:0,
  _lastY:0,
  SLIDE_TIME_FAST:1,
  SLIDE_TIME_LONG:300,
  _isOnSlide:false,
  _nextFunc:null,

DoInit:function() {
  this.DoDefineOffsetSteps();
  this.DoDefineWrapperOffset();
  this.DoBindEvents()
}, 

DoDefineOffsetSteps:function() {
  var a = parseInt($("#companyKalevaWindowPic").width(), 10);
  var b = parseInt($("#companyKalevaWindowPic").height(), 10);
  this._xOffsetStep = parseInt(a / this.X_OFFSET_MAX);
  this._yOffsetStep = parseInt(b / this.Y_OFFSET_MAX)
},

DoDefineWrapperOffset:function() {
  var a = $("#companyKalevaWindowWrapper").offset();
  this._wrapperOffsetX = parseInt(a.left, 10);
  this._wrapperOffsetY = parseInt(a.top, 10)
}, 

DoBindEvents:function() {
  var a = this;
  $("#companyKalevaWindowWrapper").bind("mousemove", function(b) {
    b.offsetX = b.pageX - a._wrapperOffsetX;
    b.offsetY = b.pageY - a._wrapperOffsetY;
    if(a._isOnSlide) {
      a._nextFunc = function() {
      }
    }else {
      a._nextFunc = null;
      a.DoChangeOffset($(this), b, a)
    }
  })
}, 

DoChangeOffset:function(f, h, c) {
  $("#companyKalevaPanoramaPic").stop();
  var d = parseInt($("#companyKalevaPanoramaPic").css("left"));
  var b = parseInt($("#companyKalevaPanoramaPic").css("top"));
  var j = c.GetNewLeftPos(h.offsetX);
  var a = c.GetNewTopPos(h.offsetY);
  var g = c.GetSlideTime(d, j, b, a);
  c._isOnSlide = true;
  c._lastX = h.offsetX;
  c._lastY = h.offsetY;
  $("#companyKalevaPanoramaPic").animate({left:j, top:a}, g, "linear", function() {
    c._isOnSlide = false;
    if(c._nextFunc != null) {
      c._nextFunc();
      c._nextFunc = null
    }
  })
}, 

GetSlideTime:function(c, f, b, a) {
  if(Math.abs(c - parseInt(f, 10)) > 20 || Math.abs(b - parseInt(a, 10)) > 10) {
    var d = this.SLIDE_TIME_LONG
  }else {
    var...