Have you ever seen those modern websites with custom cursors? Most are circular and really add a unique touch to the sites.
Here are a couple examples of sites that use a circular cursor:
Each of those sites have there own unique version of a circular cursor, and there are countless other websites out there with similar, circular cursors.
When I first began to see this trend, I certainly wanted to give it a shot but wasn't sure how hard or easy it would be. Believe it or not, it's very simple. So this tutorial I not only want to show you how to make a few types of circular cursors, I also want to explain how it works. Let's begin.
Table of Contents:
Basic Circular Cursor:
Step 1:
Start by creating a basic html webpage to test with.
Create an index.html file a fill it with the below code.
<!-- index.html -->
<head>
<title>Circular Cursor Tutorial</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h1>
Hello!
</h1>
<p>This is a simple, circular cursor that is easy to implement and will truly make your website stand out.</p>
</body>
In the head section you'll notice I've included basic meta tags, as well as an included script for jQuery UI that's being sourced from Google Hosted Libraries. I also linked a CSS and JS file we'll create next.
Step 2:
Now that we have a general base to build on, let's begin adding the code to make it function properly.
Create a CSS file titled main.css and for the entire html file set the property of the cursor to none.
/* main.css */
html {
cursor: none;
}
You should now see that your cursor vanishes. Now that we've hidden the default cursor, we need to begin adding our custom cursor.
#circularcursor {
background-color: transparent;
border:1px solid black;
height:20px;
width:20px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
position: absolute;
z-index: 1;
}
This CSS creates the circle we want. You should notice that your new circular cursor is stuck in the top left corner of the webpage. In order to attach it to the now invisible default cursor we need a little javascript.
Once you've added the CSS, create a javascript file titled main.js. Add the following code:
// main.js
document.body.onmousemove = function(e) {
document.documentElement.style.setProperty (
'--x', (
e.clientX+window.scrollX
)
+ 'px'
);
document.documentElement.style.setProperty (
'--y', (
e.clientY+window.scrollY
)
+ 'px'
);
}
In simple terms, this javascript function is just mapping the mouse. If you leave this javascript out, the webpage will have no way of mapping the cursor therefore your cursor will stay in the corner.
You should now have this:
Now that you understand the basics of how to create a custom cursor, let's create a more complex one.
Circular, Inverted Cursor:
Creating a circular, inverted cursor is also very easy.
Step 1:
Start with a basic html file:
<head>
<title>Inverted Circular Cursor</title>
</head>
<body align="center">
<div id="invertedcursor"></div>
<h1>This Cursor is Inverted!</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis volutpat elementum risus vitae volutpat. Donec luctus tellus ut ligula tempus semper. Pellentesque ac semper mauris, quis varius purus. Quisque sit amet imperdiet lorem, eget vulputate ante. Suspendisse potenti. Fusce a magna ultrices, aliquet ligula a, pellentesque est. Phasellus non luctus magna.
</p>
</body>
Step 2:
Create a CSS file titled main.css. Add a body selector and make sure to set the cursor to none. Follow it with an id titled invertedcursor.
/* main.css */
body {
height: 100%;
min-height: 100%;
cursor: none;
color: #000;
background-color: #fff;
}
#invertedcursor {
position: absolute;
width: 40px;
height: 40px;
background: #fff;
border-radius: 50%;
top: var(--y, 0);
left: var(--x, 0);
transform: translate(-50%, -50%);
z-index: 2;
mix-blend-mode: difference;
transition: transform .2s;
}
The CSS code within, simply determines what the background and text colors also mixing the coloration with the mix-blend-mode. For more info about mix-blend-mode visit: W3Schools.com - CSS mix-blend-mode Property.
Step 3:
Lastly, let's add the necessary JS in a file titled main.js.
// main.js
document.body.onmousemove = function(e) {
document.documentElement.style.setProperty (
'--x', (
e.clientX+window.scrollX
)
+ 'px'
);
document.documentElement.style.setProperty (
'--y', (
e.clientY+window.scrollY
)
+ 'px'
);
}
This JS code simply maps where the cursor is based on a X and Y axis.
You should now have this:
So those are two great examples of custom circular cursors you can easily implement in your website! Feel free to ask any questions or suggest better ways to achieve this in the comments!
Thanks for reading!
Top comments (6)
Make sure you put
pointer-events: none;in your css rule for#invertedcursor!Otherwise all your click events won't happen because you're just clicking on a div that's constantly in the way of your actual (hidden) cursor. Haha
Great work! One side note is that users on mobile don't want to see a cursor. I am currently reading this article on my phone and it feels a bit weird to have a cursor. But anyways - great work!
To be honest I’ve never really been a fan of these but really interesting to see how it’s implemented. I expected a lot more code than that!
That's fair. But yes, I was thinking the same. Certainly not anywhere near as hard as I thought. And thanks for reading Charanjit!
:|
Really good work ! But I have a question though what is this really useful for , Is it useful or just a fancy cursor ( Just wanna know the reason for this new trend not hating )