The cursor is a staple of the desktop interface however is scarcely touched by web sites. That is for good purpose. Folks count on their cursors to remain pretty constant, and meddling with them can unnecessarily confuse customers. Customized cursors additionally aren’t seen for folks utilizing contact interfaces — which excludes the vast majority of folks.
Geoff has already lined styling cursors with CSS fairly comprehensively in “Altering the Cursor with CSS for Higher Person Expertise (or Enjoyable)” so this publish goes to give attention to advanced and fascinating styling.
Customized cursors with JavaScript
Customized cursors with CSS are nice, however we are able to take issues to the following degree with JavaScript. Utilizing JavaScript, we are able to use a component as our cursor, which lets us model it nevertheless we’d the rest. This lets us transition between cursor states, place dynamic textual content inside the cursor, apply advanced animations, and apply filters.
In its most simple kind, we simply want a div that constantly positions itself to the cursor location. We are able to do that with the mousemove occasion listener. Whereas we’re at it, we could as properly add a cool little impact when clicking by way of the mousedown occasion listener.
That’s great. Now we’ve bought a little bit of a customized cursor going that scales on click on. You may see that it’s positioned based mostly on the mouse coordinates relative to the web page with JavaScript. We do nonetheless have our default cursor displaying although, and it’s important for our new cursor to point intent, comparable to altering when hovering over one thing clickable.
We are able to disable the default cursor show utterly by including the CSS rule cursor: none to *. Remember that some browsers will present the cursor regardless if the doc top isn’t 100% crammed.
We’ll additionally want so as to add pointer-events: none to our cursor ingredient to forestall it from blocking our interactions, and we’ll present a customized impact when hovering sure components by including the pressable class.
Very good. That’s a stunning little round cursor we’ve bought right here.
Fallbacks, accessibility, and touchscreens
Folks don’t want a cursor when interacting with touchscreens, so we are able to disable ours. And if we’re doing actually funky issues, we would additionally want to disable our cursor for customers who’ve the prefers-reduced-motion choice set.
We are able to do that with out an excessive amount of trouble:
What we’re doing right here is checking if the person is accessing the location with a touchscreen or if they like decreased movement after which solely enabling the customized cursor in the event that they aren’t. As a result of that is dealt with with JavaScript, it additionally signifies that the customized cursor will solely present if the JavaScript is lively, in any other case falling again to the default cursor performance as outlined by the browser.
const isTouchDevice = "ontouchstart"in window || navigator.maxTouchPoints > 0;
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: cut back)").matches;
if (!isTouchDevice && !prefersReducedMotion && cursor) {
// Cursor implementation is right here
}At the moment, the web site falls again to the default cursors if JavaScript isn’t enabled, however we may set a fallback cursor extra just like our styled one with a little bit of CSS. Progressive enhancement is the place it’s at!
Right here we’re simply utilizing a really fundamental 32px by 32px base64-encoded circle. The 16 values place the cursor hotspot to the middle.
html {
cursor:
url("knowledge:picture/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0Jve
D0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0iYmxhY2siIC8+Cjwvc3ZnPg==")
16 16,
auto;
}Taking this additional
Clearly that is simply the beginning. You may go ballistic and utterly overhaul the cursor expertise. You can also make it invert what’s behind it with a filter, you possibly can animate it, you may offset it from its precise location, or the rest your coronary heart wishes.
As slightly little bit of inspiration, some actually cool makes use of of customized cursors embody:
- Studio Mesmer switches out the default cursor for a customized eye graphic when hovering playing cards, which is tasteful and suits their model.
- Iara Grinspun’s portfolio has a cursor carried out with JavaScript that’s round and barely delayed from the precise place which makes it really feel floaty.
- Marlène Bruhat’s portfolio has a smooth cursor that’s paired with a gradient that seems behind web page components.
- Aleksandr Yaremenko’s portfolio contains a cursor that isn’t tremendous advanced however definitely stands out as a press release piece.
- Terra contains a large glowing orb containing textual content describing what you’re hovering over.
Please do take care when changing browser or native working system options on this method. The net is accessible by default, and we must always take care to not undermine this. Use your energy as a developer with style and restraint.
