Mousemove Animation

Hello I am trying to achive this effect http://mario.ign.com/modern-era/super-mario-3D-world no mousemove I would like to do it with some kind of ease effect to make it smooth but

Solution 1:

Your choppiness is because it's running solely on the mousemove event. If you break it out into an interval (say 30 frames per second), it will be much smoother. This way it continues to ease even after the mouse stops.

var $container = $('#container');
var contWidth = $container.width();
var $point = $('.point');
var delay = 100;
var decay = .1;

var intervalId;
var mouseX, mouseY;

//this function is called 30 times per second.
function ticker(){
     $point.each(function(){
         if( mouseX > (contWidth - $point.width())){
             mouseX = (contWidth - $point.width()); //instead of returning, just set the value to the max
         }
         var xp = $(this).position().left;
         xp += parseFloat((mouseX - xp) * decay); //using a decay variable for easier tweaking
         $(this).css({
            left: xp
         });
     });
}

//this interval calls the ticker function every 33 milliseconds
intervalId = setInterval(ticker, 33); //33 millisecond is about 30 fps  (16 would be roughly 60fps)

$container.mousemove(function(e){
    mouseX = e.offsetX; //store the current mouse position so we can reference it during the interval
    mouseY = e.offsetY;
});

Solution 2:

take a look at this. not sure it this is what you want but it sure does "a" trick.

$container.mousemove(function(e){

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

});

http://jsfiddle.net/d65yan/8RB24/2/

look at the .blue{} css some vendro prefix are needed if you want to support older versions of moz and chrome, forget about ie up to version 9 though