O'Reilly

Create a Trailing Mouse Cursor Effect Using MooTools

By on  

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!

Track.js Error Reporting

Recent Features

  • Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

  • 9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Incredible Demos

  • jQuery Link Nudge Plugin

    A while back I debuted a tasteful mouseover/mouseout technique called link nudging. It started with a MooTools version and shortly thereafter a jQuery version. Just recently Drew Douglass premiered a jQuery plugin that aimed at producing the same type of effect....

  • Fixing sIFR Printing with CSS and MooTools

    While I'm not a huge sIFR advocate I can understand its allure. A customer recently asked us to implement sIFR on their website but I ran into a problem: the sIFR headings wouldn't print because they were Flash objects. Here's how to fix...

Discussion

  1. Will

    Haha, this is great, thanks. Now we just need to add in the AJAX blink tag and we’re set!

  2. Claudio Ferreira

    I guess the effect is a little old but those 20 lines of code are very skillfully written, concise and elegant. Tks again David.

  3. 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.

  4. Ivan

    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 :(

  5. @Ivan: Yep, I suppose it’s useful in that regard.

  6. For some reason, this was the first thing that came to mind: http://demo.marcofolio.net/winxp_error/

  7. cursor image block click :D

  8. Not very interesting, but nicely done :)

  9. 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.

  10. Hm… I was look this effect in Windows… :-)

  11. How come this lags on my Windows system (Windows 7) in every browser, but doesn’t on my Mac (no matter which browser) .. ?

  12. It’s funny, but not very useful.
    I had a problem to click the link while this effect worked.

  13. It’s funny, but not very useful.
    I had a problem to click the link while this effect was running.

  14. It’s funny, but not very useful.
    I had a problem to click the link while this effect was running.

  15. Which event could look like “enterFrame” of ActionScript that is always be present when entering into an element (ex.: div, span, etc..)?

    Thank!

  16. 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)

  17. 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!

  18. Hello!
    I am new at wordpress and all of this. I could not get it to work. Can you help me and tell me my error? Also I wanted it to be a trail of stars. Is that possible?

    Thanks
    Lisa Rose

  19. jackhenrie

    hey i’m really enjoying messing around with this! it can produce some very interesting effects.
    is there any way to modify the code so that the image trail writes itself *behind* the content of the website? could the divs be given a lower z-index or something? would it still work?
    here’s the site i’m working on:
    http://prattwritingmfa.org/
    thanks!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...