12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Dec 31, 2019

Building Custom, Interactive Cursors in Oxygen

David Browne

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

  1. Add the markup in Oxygen
  2. Style to create a circle and a dot
  3. Use jQuery to calculate cursor position & listen for click events
  4. 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.

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right