Create a Trailing Mouse Cursor Effect Using MooTools
Remember the old days of DHTML and effects that were an achievement to create but had absolutely no value? Well, a trailing mouse cursor script is sorta like that. And I'm sorta the type of guy that creates effects just because I can. Here's how you can create a trailing mouse cursor script for your website.
The MooTools JavaScript
window.addEvent('domready',function() {
var container = $(document.body),
speed = 1200;
container.addEvent('mousemove',function(e) {
var image = new Element('img',{
src: 'pointer.png',
styles: {
position: 'absolute',
top: e.page.y,
left: e.page.x
},
tween: {
duration: speed,
onComplete: function() {
image.dispose();
}
}
}).inject(container,'top').fade('out');
});
});
The first step is to pick the container for which you want the mouse trailer to work in and the speed at which you'd like the element to fade out. Apply a mousemove event listen to the container and inject a new element into that container each time the event fires. Use the Event.page.x/y coordinates as your absolute positioning coordinates.
Use this sparingly as using it on every page could be the most annoying thing in the world. Yay! Now we're all DHTML superstars!
Comments
Be Heard!
Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!
Haha, this is great, thanks. Now we just need to add in the AJAX blink tag and we’re set!
I guess the effect is a little old but those 20 lines of code are very skillfully written, concise and elegant. Tks again David.
Hey david.. see i have created this with Jquery –
http://motyar.blogspot.com/2009/12/create-pointer-trails-with-jquery.html
keep it up man.
I think this could be useful to track user’s pointer in a webpage, first you store the coordenates, and after you can replay the movement in your page.
Sorry for my english :(
@Ivan: Yep, I suppose it’s useful in that regard.
For some reason, this was the first thing that came to mind: http://demo.marcofolio.net/winxp_error/
cursor image block click :D
Not very interesting, but nicely done :)
Bro,thankx for the cool tutorial site.
dear, i wanna record mac address of client side (visitors)…. please post an article related to that php script.i will be really thankful to u.
Hm… I was look this effect in Windows… :-)
How come this lags on my Windows system (Windows 7) in every browser, but doesn’t on my Mac (no matter which browser) .. ?
It’s funny, but not very useful.
I had a problem to click the link while this effect worked.
It’s funny, but not very useful.
I had a problem to click the link while this effect was running.
It’s funny, but not very useful.
I had a problem to click the link while this effect was running.
Which event could look like “enterFrame” of ActionScript that is always be present when entering into an element (ex.: div, span, etc..)?
Thank!
how to apply it to wordpress, what steps should be taken to install this script?
Hey David, this is a nice alternative to the old dhtml days :)
In a moment of sudden inspiration decided to port it to jQuery (the other example didn’t work for me), and as a result I threw it into a WP plugin : http://netweblogic.com/wordpress/plugins/cursor-trail/
hope someone finds it useful (as useful as this can be)
oh, adding to your MT example, if you see my implementation I add +5 to the x and y values because if not you can’t click on links!