JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<script src="http://www.exaudios.com/jquery.easing.1.3.js"></script>
<div id="outer_container">
<div id="imagePan">
    <div class="container"><div class="panning">
           <img src="http://wishtest.silvertive.com/WWS/images/50/33cc9214-6df2-4a26-a959-1c003b0b8820.jpg" alt="background image"  />
    </div></div>
</div>
</div>

CSS

body {margin:0; padding:0; background:#eee;}
#outer_container, #imagePan{height:400px; width:600px;}
#outer_container{margin:40px auto; padding:4px; border:8px solid #dadada;}
#imagePan{position:relative; overflow:hidden; cursor:crosshair;}
#imagePan .container{position:relative; left:0;}
.card{margin:0 auto;margin:0 auto;display:inline-block}
.line{width:15000px;clear:both;}
.bg{ vretical-align:middle;width:1000px;height:1000px}

JavaScript

$(document).ready(function() {
    $outer_container = $("#outer_container");
    $imagePan_panning = $("#imagePan .panning");
    $imagePan = $("#imagePan");
    $imagePan_container = $("#imagePan .container");

    $imagePan_panning.css("margin-top", ($imagePan.height() - $imagePan_panning.height()) / 2 + "px");
    containerWidth = $imagePan.width();
    containerHeight = $imagePan.height();
    totalContentW = $imagePan_panning.width();
    totalContentH = $imagePan_panning.height();
    $imagePan_container.css("width", totalContentW).css("height", totalContentH);

    function MouseMove(e) {
        var mouseCoordsX = (e.pageX - $imagePan.offset().left);
        var mouseCoordsY = (e.pageY - $imagePan.offset().top);
        var mousePercentX = mouseCoordsX / containerWidth;
        var mousePercentY = mouseCoordsY / containerHeight;
        var destX = -(((totalContentW - (containerWidth)) - containerWidth) * (mousePercentX));
        var destY = -(((totalContentH - (containerHeight)) - containerHeight) * (mousePercentY));
        var thePosA = mouseCoordsX - destX;
        var thePosB = destX - mouseCoordsX;
        var thePosC = mouseCoordsY - destY;
        var thePosD = destY - mouseCoordsY;
        var marginL = $imagePan_panning.css("marginLeft").replace("px", "");
        var marginT = $imagePan_panning.css("marginTop").replace("px", "");
        var animSpeed = 500; //ease amount
        var easeType = "easeOutCirc";
        if (mouseCoordsX > destX || mouseCoordsY > destY) {
            //$imagePan_container.css("left",-thePosA-marginL); $imagePan_container.css("top",-thePosC-marginT); //without easing
            $imagePan_container.stop().animate({
                left: -thePosA - marginL,
                top: -thePosC - marginT
            }, animSpeed); //with easing
        } else if (mouseCoordsX < destX || mouseCoordsY < destY) {
            //$imagePan_container.css("left",thePosB-marginL); $imagePan_container.css("top",thePosD-marginT);...