Desaceleration mousemove

on mouse move follow mouse with desaceleration

by Dayan Moreno

HTML

<div class="main_wrapper">
    <div class="wrapper_point" id="container">
        <div class="point blue"></div>
<!--         <div class="point yellow"></div>
        <div class="point black"></div>
        <div class="point white"></div> -->
    </div>   
</div>

CSS

.main_wrapper{
    width:70%;
    margin: 0 auto;
}
.wrapper_point{
    background:red;
    width:100%;
    position:relative;
    padding-top:56.25%;
    overflow:hidden;
}

.point{
    width:30px;
    position: absolute;
    height:30px;    
}

.blue{
    background:blue;
    top: 10%;
    left:40%;
    transition: left 300ms 20ms ease;
}

.yellow{
    background:yellow;
    left:20%;
    top:10%;
}

.black{
    background:black;
    left:50%;
    top:10%;
}

.white{
    background:white;
    left: 80%;
    top:60%;
}

JavaScript

var $container = $('#container');
var contWidth = $container.width();
var $point = $('.point');
var delay = 100;
var blue=$('.blue');
var offset=$container.offset().left;
$container.mousemove(function(e){

    var xp = e.clientX-offset;
    //alert(xp);
    
    blue.css({
                left: xp+'px'
    });

});