JSFiddle - React, Tailwind, and code Playground

by dusset

HTML

<div id="box"></div>
<div id="but"></div>
<div id="butb"></div>
<p id="coords"></p>
<p id="width"></p>
<div id="left"></div>
<div id="right"></div>

CSS

#box {
    width:150px;
    height:150px;
    position:absolute;
    top:150px;
    left:600px;
    background-color:red;
    z-index:100;
}
#but { width:50px; height:50px; background-color:blue; position:relative; float:left;}
#butb { width:50px; height:50px; background-color:lime; position:relative; float:left;}
* {padding:0; margin:0}
html, body { height:100%; }
p {position:relative;}

#left { width:40%; height:100%; background-color:black; opacity:0.1; position:absolute; left:0; }
#right { width:40%; height:100%; background-color:black; opacity:0.1; position:absolute; right:0; }

JavaScript

$("#but").mouseover(function(){
    $("#box").animate({left: '50px'}, 5000, 'swing');
});

$("#but").mouseout(function(){
    $("#box").stop()
});

$("#butb").mouseover(function(){
    $("#box").animate({left: '50px'}, 8000, 'swing');
});

$("#butb").mouseout(function(){
    $("#box").stop()
});

$(window).mousemove(function(e){
    var x = e.pageX;
    
    document.getElementById("coords").innerHTML = x;
    //60-100
    //30-60
    //10-30
    //0-10
    var windowWidth = $(this).width();
    
    document.getElementById("width").innerHTML = windowWidth;
    
    var leftArea = windowWidth * 0.4;
    var rightArea = windowWidth * 0.6;
    
    var leftA = leftArea * 0.1;
    var leftB = leftArea * 0.2 + leftA;
    var leftC = leftArea * 0.3 + leftA + leftB;
    var leftD = leftArea * 0.4 + leftA + leftB + leftC;
    
    if (x <= leftArea) {
        if (x <= leftD) {
            moveLeft(12000);
        } else if (x <= leftC) {
            moveLeft(8000);
        } else if (x <= leftB) {
            moveLeft(5000);
        } else if (x <= leftA) {
            moveLeft(3000);
        } else {
            $("#box").stop();
        };
    } else if (x >= rightArea) {
        moveRight(6000);
    } else {
        $("#box").stop();
    };
});

function moveLeft(speed) {
    $("#box").animate({left: '50px'}, speed, 'swing');
};
function moveRight(speed) {
    $("#box").animate({left: '600px'}, speed, 'swing');
};