JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div id="follower"></div>
</div>
<div class="container2">
<div id="follower2"></div>
</div>
CSS
#follower{
position : relative;
background-color : yellow;
width:30px;
height:30px;
border-radius:50px;
}
.container
{
width:150px;
height:150px;
position:absolute;
top:0;
left:0;
overflow:hidden;
border:1px solid #000000;
border-radius:500px;
}
#follower2{
position : relative;
background-color : red;
width:50px;
height:50px;
border-radius:50px;
}
.container2
{
width:150px;
height:150px;
position:absolute;
top:200px;
left:200px;
overflow:hidden;
border:1px solid #000000;
border-radius:500px;
}
JavaScript
var Circle = function(container, follower, r){
var center = {
x: $(container).width()/2 - r,
y: $(container).height()/2 - r
};
var distanceThreshold = $(container).width()/2 - r;
var mouseX = 0, mouseY = 0;
$(window).mousemove(function(e){
var d = {
x: e.pageX - center.x,
y: e.pageY - center.y
};
var distance = Math.sqrt(d.x*d.x + d.y*d.y);
if (distance < distanceThreshold) {
mouseX = e.pageX;
mouseY = e.pageY;
} else {
mouseX = d.x / distance * distanceThreshold + center.x;
mouseY = d.y / distance * distanceThreshold + center.y;
}
});
// 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) / 2;
yp += (mouseY - yp) / 2;
follower.css({left:xp, top:yp});
}, 30);
};
var c1 = new Circle(".container", "#follower", 15);
var c2 = new Circle(".container2", "#follower2", 25);