JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div class="centerdiv">
    <div id="c1" class="container">
        <div class="follower"></div>
    </div>
    <div id="c2" class="container">
        <div class="follower"></div>
    </div>
</div>

CSS

.follower{
  position : relative;
  background-color : yellow;
  width:15px;
  height:15px;
  border-radius:50px;
  opacity: 0;
}

.container:hover .follower { display:block; }
#c1 { width:200px; height:100px; }
.centerdiv {
    width:150px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}
.container
{
    width:150px;
    height:150px;   
    overflow:hidden;
    border:1px solid #000000;
}

JavaScript

var mouseX = 0, mouseY = 0, limitX = 15, limitY = 15;

// cache the selector
var follower = null; 
var xp = 0, yp = 0;

$(window).mousemove(function(e) {
    var $elem = $(document.elementFromPoint(e.pageX, e.pageY));
    
    if($elem.attr('class') == 'container') {
        var offset = $elem.offset();
    
        mouseX = Math.min(e.pageX - offset.left, $elem.width() - limitX);
        mouseY = Math.min(e.pageY - offset.top, $elem.height() - limitY);
        
        if (mouseX < 0) mouseX = 0;
        if (mouseY < 0) mouseY = 0;
    
        
        // change 12 to alter damping higher is slower
        xp += (mouseX - xp) / 12;
        yp += (mouseY - yp) / 12;
        

        
        var loop = setInterval(function() {
            $elem.find('.follower').css({left:xp, top:yp}); 
        }, 30);
    }
});

$('.container').mouseenter(function() {

        $(this).children('.follower').animate({
            opacity: "1"
        }, 1000);

});

$('.container').mouseleave(function() {

        $('.follower').animate({
            opacity: "0"
        }, 200);

});