Motyar

Create a pointer trails with Jquery

Hope you all know how to set mouse pointer trails with your operation system. Windows user can set it from Control panel-->Printer and other Hardware-->Mouse settings-->Check the pointer trail checkbox.
I am here to demonstrate how you can set a pointer trail on your web-page with the help of Jquery



Its simple - create some img elements having pointer-image in src, and let them follow pointer-position whenever mouse move. And don't forget to fade them out slowly.

The Javascript

 $(document).ready(function() {

    $(document).mousemove(function(e) {

                //create img elements having pointer.png in their src 
                // download it from 
                // http://sites.google.com/site/dharmmotyar/Home/pointer.png 
                pointer = $('<img>').attr({'src':'pointer.png'});

                //and append them to document
                $(document.body).append(pointer); 
 
                //show them at mouse position & fade out slowly
                pointer.css({
                        'position':'absolute',
                        top: e.pageY +2 ,    //offsets
                        left: e.pageX +2   //offsets
                    }).fadeOut(1500);   
    });
});


 
Demo


You can see the working demo by moving your mouse.


Labels: , , 

By :  






























 


  9 comments

 



 


  
     #
   
Anonymous blogbyneha says…




Hi.. 
A very interesting journey at your blog indeed. Thanks for the contribution. Look forward to seeing what other little tidbits you have to offer.

Best Wishes,
Neha Sidana


  




 


  
     #
   
Blogger wasim says…




Great script by Smart Boy..

Wasim


  




 


  
     #
   
Anonymous Anonymous says…




Very useful! Only change would be to add a callback function into the .fadeOut() call so that the image gets removed once it's hidden, otherwise you'll end up with a lot of images in the DOM very quickly.

.fadeOut(
    1500,
    function(){$(this).remove();}
);


  




 


  
     #
   
Anonymous Derrick says…




This makes a mess.  You need to track the distance the mouse has moved, instead of relying on a timer. 

If the mouse is moves farther/faster, you need to get rid of the trails much faster as well.


  




 


  
     #
   
Blogger Dharmveer Motyar says…




@Derrick, @Anonymous thanx for the idea.
@wasim thanx for your love.


  




 


  
     #
   
Anonymous Fraz Ahmed says…




Hmmm...its a nice looking effect. I wrote an article for same topic. In my solution you can embed anything from image to swf with your mouse cursor. You may read more about the solution here:

http://www.techmug.com/jmouse-follower/


  






 


  
     #
   
Anonymous Anonymous says…




its nice to seee


  




 


  
     #
   
Anonymous Anonymous says…




Hi. 
I am trying to use the above in Wordpress, however it is not working.  The cursor stays the same, but the trail displays that icon that means there is no image? 
any ideas of what could be wrong?

thank you


  


 




Post a Comment