In this tutorial I will show you how you can implement custom cursors with some really simple CSS and JavaScript using jQuery. Both the demo and source can be found below. The source is really simple so I will go over the main points.
The HTML
For the HTML, we will make a figure tag and give it an ID to be used in the CSS and JavaScript. I added this in the body because I want my cursor to be changed everywhere. You could add it in another container div though if you like.
<figure id="mouse-pointer"></figure>
The CSS
The CSS is equally as easy to take care of.
* { cursor: none; } figure#mouse-pointer { background-image: url('../img/pointer.png'); width: 44px; height: 44px; position: absolute; margin-left: -8px; display: block; }
We use the background-image property to define our cursor and position to absolute. We can use margin-left to adjust the position.
The JavaScript
And here is the JavaScript where we use jQuery to track the mouse position and adjust the position of the mouse cursor accordingly.
$(function (){ $(window).mousemove(function(event) { $('#mouse-pointer').css({ 'top' : event.pageY + 'px', 'left' : event.pageX + 'px' }); }); });
This is a nice little trick to spice up your website if used properly under the right circumstances.