JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div id="stage" class="stage no_selection"></div>
<div id="background" class="background no_selection"></div>
<div id="myCircle" class="myCircle no_selection"></div>

CSS

body {
    overflow: hidden;
}
.no_selection {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}
.background {
    overflow: hidden;
    margin: 0 auto;
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    width: 700px;
    background-color: #e7e7e7;
}
.circle {
    text-align: center;
    position: absolute;
}
.stage {
    height: 100vh;
    width: 100%;
}

JavaScript

$(function () {
    function addMyCircle(size) {
        $("#myCircle").append("<div class=\"circle\" style=\"" +
            "width:" + size + "px;" +
            "height:" + size + "px;" +
            "line-height:" + size + "px;" +
            "background-color:red;" +
            "top:50%;" +
            "left:50%;" +
            "border-radius:" + size + "px;" +
            "text-align: center;" +
            "margin-top: -" + size / 2 + "px;" +
            "margin-left: -" + size / 2 + "px;" +
            "position: fixed;" +
            "\">i</div>");
        moveBg();
    }
    var currentMousePos = {
        x: -1,
        y: -1
    };
    $(document).mousemove(function (event) {
        currentMousePos.x = event.pageX;
        currentMousePos.y = event.pageY;
    });

    function moveBg() {
        setTimeout(function () {
            if (currentMousePos.x >= 0 && currentMousePos.y >= 0) {
                var mvtX = "+=5";
                var mvtY = "+=5";
                //mvt
                if (currentMousePos.x >= 700 / 2) {
                    mvtX = "-=5";
                }
                if (currentMousePos.y >= 500 / 2) {
                    mvtY = "-=5";
                }
                $("#background").css({
                    "left": mvtX,
                        "top": mvtY
                });
                console.log(currentMousePos.x);
            }
            moveBg();
        }, 100);
    }
    addMyCircle(30);
});