Go to homepage

Projects /

Custom Cursor

A JavaScript plugin to replace the native cursor with a custom image.

View Demo

Dependencies

All components are compatible with CodyFrame, Tailwind CSS or any other CSS framework.

How To

Use this plugin to replace the native cursor with a custom image, and, optionally, animate it.

To connect a target element to a custom cursor, the ID value of the cursor should be equal to the data-custom-cursor attribute of the target.

<div data-custom-cursor="cursor-1" >
  <!-- ... -->
</div>

<div id="cursor-1" class="c-cursor js-c-cursor" aria-hidden="true">
  <svg class="c-cursor__img icon icon--lg" viewBox="0 0 48 48">
    <!-- ... -->
  </svg>
</div>

Make sure to include the .js-c-cursor element as the last element in your HTML page:

<body>
  <header>
    <!-- .... -->
  </header>

  <main>
    <!-- ... -->
  </main>

  <footer>
    <!-- ... -->
  </footer>

  <div id="cursor-1" class="c-cursor js-c-cursor" aria-hidden="true">
    <svg class="c-cursor__img icon icon--lg" viewBox="0 0 48 48">
      <!-- ... -->
    </svg>
  </div>
</body>

Cursor Classes #

The following classes are added to the cursor element:

  • c-cursor--in: added when the cursor is over the target element;
  • c-cursor--out: added when the cursor is outside the target;
  • c-cursor--left/c-cursor--right: added when the cursor is over the left/right half of the target;
  • c-cursor--top/c-cursor--bottom: added when the cursor is over the top/bottom half of the target.

Categories

Bug Report & Feedback

Component Github page ↗

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.