Element.followMe()

Snippets are small pieces of code that do not fit in the UvumiTools plugin category. Please note that each of these semi-useful functions requires Mootools 1.2.

Ok, you could already see this kind of effect back in 1997 but hey, retro is cool, right? Let's see if you can figure out what it does by just reading the code. Or you can cheat and just execute the demo at the bottom of the page.

Element.implement({
followMe : function(offset){
offset = offset || 0;
var pos = this.getCoordinates();
this.inject($(document.body)).setStyles({
position:'absolute',
margin:0,
top:pos.top,
left:pos.left
}).set('morph',{
link:'cancel',
transition:Fx.Transitions.linear,
duration:1000
});
$(document.body).addEvent('mousemove',function(e){
this.store('page',{top:e.page.y+offset,left:e.page.x+offset});
}.bind(this));
var goToMouse = function(){
var page = this.retrieve('page');
if(page){
this.get('morph').start(page);
this.store('page',false);
}
}
goToMouse.periodical(100,this);
return this;
}
});

Usage:

$('myElement').followMe();

Demo:

dummy