jMouse Follower

What is Mouse Follower?

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.

[ad#chitika-460x120]

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>

[ad#chitika-468x250]

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

written by +

I believe we learn everyday a new thing and add another experience in our life. Same apply for me…so I share my experiences in the field of web development and design with the hope it will be useful for someone.
Related Posts

6 Responses to "jMouse Follower"

  1. Shikeb Ali says:

    Dear Admin :)

    Where it is implemented or will be implemented ??

  2. admin says:

    I’ll be posting the link when it goes live.

  3. pyr0 says:

    I like it. I love jQuery, and there is a ton I could do with this. If there is a row in a table, you could easily rig it so it become a mouseover effect for that row only, displaying a specific image or set of images. Awesome, great job!

  4. Fraz Ahmed says:

    I love jQuery too. Ya! we can do much with jQuery and with less code :)
    Thanks for your appreciation.

    Here is a good article if you want to get start with jQuery:

    http://spyrestudios.com/simple-guide-how-to-get-started-with-jquery/

  5. Abubaker Shekhani says:

    Good Work. :)

    regards,
    Abubaker

  6. jMouse Follower | Techmug | Web Development & Solution Tutorials says:

    [...] Read More About JMouse Follower Posted in: Flash, Jquery   Tags: cursor, div, Flash, follow, jQuery, mouse, object, swf, trail [...]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


© Copyright - Tech Mug