JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pageBg"></div>

CSS

#pageBg {
    background: url('http://placekitten.com/2000/2000') no-repeat 0 0 fixed;
    height: auto;
    left: 0;
    min-height: 768px;
    min-width: 500px;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    background-size: 100%
}

JavaScript

$(document).ready(function () {

    var isMove = false;
    var zScale = 1;

    var isPan = false;
    var mouseDownX;
    var mouseDownY;
    var bgX;
    var bgY;
    var oWidth = $('#pageBg').css("width");
    var oHeight = $('#pageBg').css("height");
    oWidth = parseInt(oWidth.replace("px", ""));
    oHeight = parseInt(oHeight.replace("px", ""));


    $('#pageBg').mousemove(function (e) {
        if (isPan) {
            isMove = true;
            movemouse(e);
        } else {

        }

    });


    $('#pageBg').click(function (e) {
        if (isMove) {
            isMove = false;
        } else {

            zScale = zScale + 0.1;
            getBgPos();

            bgX = (e.pageX - ((e.pageX - bgX) * zScale)) * e.pageX / oWidth;
            bgY = (e.PageY - ((e.pageY - bgY) * zScale)) * e.pageY / oHeight;

            $('#pageBg').css('background-size', (zScale * 100) + '%');
            $('#pageBg').css('background-position-x', bgX + 'px');
            $('#pageBg').css('background-position-y', bgY + 'px');

        }

    });

    $('#pageBg').mousedown(function (e) {
        isPan = true;
        mouseDownX = e.pageX;
        mouseDownY = e.pageY;
        //alert(e.pageX);

        getBgPos();
    });

    $(this).mouseup(function (e) {
        isPan = false;
    });


    function movemouse(e) {

        var mousePosX = bgX + (e.pageX - mouseDownX);
        var mousePosY = bgY + (e.pageY - mouseDownY);
        if (mousePosX > 0) {
            mousePosX = 0;
        }
        if (mousePosY > 0) {
            mousePosY = 0;
        }


        $('#pageBg').css('background-position-x', mousePosX + 'px');
        $('#pageBg').css('background-position-y', mousePosY + 'px');
        console.log(mousePosX, mousePosY);
    }

    function getBgPos() {
        var pos = $('#pageBg').css("background-position");
        if (pos == 'undefined' || pos == null) {
            pos = [$('#pageBg').css("background-position-x"),...