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 $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: