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!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • 5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3

    Row highlighting and individual cell highlighting in tables is pretty simple in every browser that supports :hover on all elements (basically everything except IE6). Column highlighting is a bit more difficult. Luckily MooTools 1.2.3 makes the process easy. The XHTML A normal table. The cells...

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

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...