Mousemove animation
Hi i am trying to achieve this effect http://mario.ign.com/modern-era/super-mario-3D-world no mousemove I would like to do it with some kind of lightness effect to do it but not really know how to achieve deaceration effect, so far I've done 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 the animation doesn't look as smooth as the mario site, I would appreciate it if you guys could help me find resources or guide me to achieve this effect. Thank you very much.
source to share
Your mutability is due to the fact that it works exclusively on the mousemove event. If you decompose it into an interval (say 30fps) it will be much smoother. Thus, it continues to decrease 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;
});
source to share
take a look at this. not sure if this is what you want, but he sure is the "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 is required, if you want to support older versions of moz and chrome forget about before version 9 though
source to share