DEV Community

loading...

How to Create a Contrasting Cursor. BONUS: MouseMove Optimization.

datsgabs profile image Gabriel Lazcano ・1 min read

Link to original article with code snippets (recommended): https://gabriellazcano.com/blog/how-to-create-a-contrasting-cursor/

You might think, what do you think by contrasting cursor. I believe it’s better if you see it by yourself.

To achieve this we are using the mix-blend-mode CSS property with the value difference which basically inverts the color of the content it has below it.

We have to position the circle absolute to the container, giving it a size and with border-radius we are making the div a circle. I disable the pointer-events or we are not going to be able to click anywhere in the site.

Setting the background-color to white in both the .container and the .circle is needed for this to work, you can change the color but it might not look as good.

And we start to see that it blends already. We just have to make the circle to move.

Bonus: MouseMove Optimization
While it’s working, if you add a console.log() to the getDimensions function you might see lots of calls to the function. Which is not really good for performance.

There is a really known way of solving this problem. By throttling the function calls only firing it once the mousemove event idle for 250ms

Discussion (0)

pic
Editor guide