Custom cursors with CSS and jQuery



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.


Live demo Download source


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.

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+4Share on StumbleUpon2Share on Reddit0Share on LinkedIn0Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!