JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div class="centerdiv">
    <div class="container">
        <div id="follower">
            <div class="middle">
            </div>
        </div>
    </div>
</div>
</div>

CSS

#follower {
    position: relative;
    background-color: yellow;
    width: 1000px;
    height: 1000px;
    border-radius: 50px;
}

.middle {
    position: absolute;
    width: 200px;
    height: 200px;
    background: black;
    top: 50%;
    margin-top: -100px;
    left: 50%;
    margin-left: -100px;
}

.centerdiv {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    overflow: hidden;
}

.container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid #000000;
}

JavaScript

var mouseX = 0,
    mouseY = 0;
$(window).mousemove(function(e) {
    var offset = $('.container').offset();
    mouseX = Math.min(e.pageX - offset.left);
    mouseY = Math.min(e.pageY - offset.top);
    if (mouseX < 0) mouseX = 0;
    if (mouseY < 0) mouseY = 0;
});

// cache the selector
var follower = $("#follower");
var xp = 0,
    yp = 0;
var loop = setInterval(function() {
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp) / 20;
    yp += (mouseY - yp) / 20;
    follower.css({
        left: - xp + 50,
        top: - yp + 50
    });

}, 30);