Dec 30, 2009

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: Animation, Javascript, jquery

By : Motyar+ @motyar