鼠标移动动画

Question

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 actually dont know how to achive de desaceleration effect, so far what I've done is this http://jsfiddle.net/xtatanx/8RB24/1/ :

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

$container.mousemove(function(e){
    clearTimeout(timer);

    var timer = setTimeout(function(){
        console.log(e.offsetX);
        $point.each(function(){
            if( e.offsetX > (contWidth - $point.width())){
                return;
            }
            var xp = $(this).position().left;
            xp += parseFloat((e.offsetX - xp)/ 20);
            $(this).css({
                left: xp
            });
        });
    }, delay);

});

But I think that the animation doesnt feel as smooth as mario site i would appreciate if you guys could help me ginding resources or guiding me to achieve this effect. Thank you very much.

Answer 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;
});

Answer 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