Create a custom cursor for your webpages

custom cursor

This tutorial will explain how to replace the usual mouse pointer with your own custom pointer.

The idea behind the below example is to hide the actual pointer and move an image in the page with respect to the actual pointer.

First we will hide the actual mouse pointer

body{
    cursor:none;
}

Now we will insert an image to be used as the cursor

<img id="cursor" src="images/custom_cursor.png" />

And make the position CSS property to absolute

#cursor{
    position:absolute;
}

Now we need to add the js code to pick the coordinates of the pointer on mouse move and change the left and top margins of the custom cursor image

$(document).mousemove(function(e){
    $('#cursor').css({'left':e.pageX,'top':e.pageY});
});

To have a precision on mouse clicks you have to use a smaller image such as 50×50 and then reduce half the size of the image from e.pageX and e.pageY

Suppose if the size of the image is 50×50, then we will reduce 25 from both

$(document).mousemove(function(e){
    $('#cursor').css({'left':e.pageX-25,'top':e.pageY-25});
});

Leave a Reply

Your email address will not be published.