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 ($37/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

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.

6 comments on “Building Custom, Interactive Cursors in Oxygen”

  1. Hi!
    I tried this, but have questions – it didn’t work for me, probably because I don’t understand where the divs/classes should be added? Is the CSS placed site-wide stylesheets? How/where is the JS added (within the main div)? Is all of this done in the main template? Thank you for your help… Barbara

    1. Hi Barbara,

      I don’t understand where the divs/classes should be added

      If you want this cursor effect to be sitewide i.e., on all the pages of the site set this up in your Main Catch All Template.

      Is the CSS placed site-wide stylesheets

      Yes. There are several places where custom CSS can be added. For this tutorial, you could go to Manage > Stylesheets in the Oxygen editor, add a new stylesheet and paste in there.

      How/where is the JS added (within the main div)?

      Select the Div for which you added the class of cursor-container, go to Advanced > JavaScript and paste in there.

    1. The simplest way would be to hide the cursor container inside a media query for a specific screen size and lower.

      @media (max-width: 767px) {
      
         .cursor-container { 
             display: none; 
         }
      
      }

      “`

magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: