⚡️ Download 374 HTML, CSS, JS Components and 8 templates for $99 - Limited time offer ⏳

Projects

Progress value is 30%

Custom Cursor

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

View Demo

Dependencies

All components are based on CodyFrame.

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

Project duplicated

Project created

Globals imported

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