Lately, I have come across more and more sites that are replacing the default cursor with something custom. Perhaps not a great fit for a lot of websites, but can work really well on portfolios, high-end photography sites, etc.
Live Demo (Note; may appear slightly janky if viewed with dev tools open)
This tutorial was inspired by the cursor over at mossio.co website and then finding a similar idea in this webflow demo.
Dynamic Cursors
If we take a look at the Mossio.co home page below with the cursor in action, the cursor is basically just a circle and a dot, with a delay on the circle. The cursor is interactive as it changes as we pass over links.
Unlike the traditional way of changing cursors using browser defaults or replacing them with a static image, this is dynamic and feels much smoother.
There has been a tutorial written in the Webflow community on how to create the demo I linked to above, but if you don't speak Webflow UI, which I don't, it doesn't make much sense.
As we only need some jQuery to calculate where the cursor is, relative to the viewport, we can easily apply this to elements in Oxygen.
Building a Cursor in Oxygen
- Add the markup in Oxygen
- Style to create a circle and a dot
- Use jQuery to calculate cursor position & listen for click events
- Change classes on cursor elements to apply effects.
Most of this is copy and paste, you can then style the cursor however you like the normal Oxygen way.
1. Add the Markup in Oxygen
Nice and simple. Use the structure panel to make sure you have this structure. Two divs inside a container div, with these class names.