Mouse Follower or Cursor Trail is typically an image or set of images which follows the cursor in your browser screen.

Demo and Download

To understand more clearly visit demo. Alternatively you may also download the files from here.

Problem

Today I was asked to enhance the existing mouse trail feature of a website. They were using 3 or 4 PNG images to make the mouse trail. But the problem was that images were inline. While our client wanted some more advanced animation with mouse trail/follower. And that animation was not possible without using flash animation in it.

From the above its clear that we were need to have a DIV in the script where all of the Flash embedded code may be inserted. I searched for many scripts but the problem was that they were doing well with IE but for Firefox answer was NO.

Things to do

Eventually I had to play with code. And surely my first choice for Javascript is always jQuery. Basically the concept was so simple, to achieve Mouse Follower effect we need to do following:

1. Create a DIV for Flash Object (You may also use image in this DIV).
2. Find X and Y co-ordinates of cursor’s current position.
3. Change DIV position according to X and Y position of Cursor.

How it works?

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
   $("*").mousemove(function(e){
	  $("#follower").css({'position' : 'absolute', 'margin-left' : e.pageX+10, 'margin-top' : e.pageY+10, 'display' : 'block', 'z-index' : '999'});
   });
})
// ]]></script>

Explanation

1. In the above code first we define use document.ready() it simply call the underneath function on the load of page.
2. $(“*”).mousemove(function(e){… – this line reads that call the function whenever mouse move on any element of the page. mousemove is a jQuey event. Click here to learn more jQuery events.
3. $(“#follower”).css({… – this line looks for an element which ID is “follower”. This is our Flash Object DIV. In this line we change the CSS style of our DIV. jQuery has made it much easy for us to change the CSS style of any element on the move.
4. We get X and Y co-ordinates by calling page.X and page.Y builtin functions of jQuery.
5. We used margin-left and margin-top to style our DIV. Values of both margins are set equivalent of page.X and page.Y
6. So, every time when mouse moves on the page, our DIV changes its position itself. And this all is happening because we have defined the position of our DIV to absolute. So, DIV is free to move anywhere on the page.
7. We used +10 with page.X and page.Y its just because we wanted to move our object a little far from the cursor.
8. Our DIV has a Flash Object. And we have made this flash animation a transparent one. So, it will not hide any element on the page. Code for our DIV is below:

<div id="follower">
 <object id="followers" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="250" height="150" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
 <param name="name" value="follower" />
 <param name="align" value="middle" />
 <param name="allowScriptAccess" value="sameDomain" />
 <param name="allowFullScreen" value="false" />
 <param name="quality" value="high" />
 <param name="bgcolor" value="#ffffff" />
 <param name="wmode" value="transparent" />
 <param name="allowScale" value="false" />
 <param name="src" value="mouse.swf" />
 <param name="allowfullscreen" value="false" />
 <embed id="followers" type="application/x-shockwave-flash" width="250" height="150" src="mouse.swf" allowscale="false" wmode="transparent" bgcolor="#ffffff" quality="high" allowfullscreen="false" allowscriptaccess="sameDomain" align="middle" name="follower"></embed>
 </object>
</div>

Don’t forget to share the post on your favorite website. It may also help someone somewhere.