SHARE

Create Custom Cursors With JavaScript and CSS3

Written By

Aug 5, 2011

When developing your website, you might be scratching your head wondering what you can do to customize your site further. One possibility that can add some flavor and zest to your site while at the same time reinforcing branding, is to use a custom cursor. Your custom cursor can be any image that you choose.

For example, why not use a miniature version of your logo or company name? It’s best however, to keep it within the realm of usability and not be so jarring as to distract your visitor. A custom cursor should remain useful while showing to your visitors that this site invested a little extra time and code to provide a unique experience.

Let’s start with the JavaScript code for jQuery that will allow the arrow to follow the cursor. You’ll want to place this code within the <head> tags of your HTML page.

<script type="text/javascript">
 	$(document).ready(function(){
      	$('#test-area').mouseout(function(){
           	$('#mycursor').hide();
           	return >false;
      	});
      	$('#test-area').mouseenter(function(){
           	$('#mycursor').show();
           	return >false;
      	});
      	$('#test-area').mousemove(function(e){
           	$('#mycursor').css('left', e.clientX - 20).css('top', e.clientY + 7);
      	});
});
</script>

Now for the CSS. First, let’s create an area for where the custom cursor will appear:

#test-area {
 	height: 200px;
 	border: 3px dashed #CCCCCC;
 	background: #FFFFFF;
 	padding: 20px;
 	cursor: url(./blank.cur), none;
}

That code is pretty basic enough. You might notice that it sets the cursor to use an image file that is blank in the very last line.

Here is the CSS code for the custom cursor:

#mycursor {
 	cursor: none;
 	width: 97px;
 	height: 137px;
 	background: url("images/custom-cursor.jpg") no-repeat left top;
 	position: absolute;
 	display: none;
 	top: 0;
 	left: 0;
 	z-index: 10000;
}

You will want to adjust the width and height to match your custom cursor. You’ll also want to update the path to the image.

Now, to add the custom cursor to your HTML page:

<div id="test-area">
     Move mouse over this area.
</div>
<div id="mycursor"></div>

Originally, I learned this code from ajaxblender. Unfortunately, I was not able to recreate this code for use on my CSS playground. Everything worked except the custom cursor never appeared. Instead, the cursor simply disappeared while I hovered over the test area. Perhaps you will have better luck than me and this will serve as inspiration for you to improve your site.

Create Custom Cursors With JavaScript and CSS3

Michael Rohde

Recommended for you...

Company

Categories