Custom Cursor
A JavaScript plugin to replace the native cursor with a custom image.
Projects /
Projects /
A JavaScript plugin to replace the native cursor with a custom image.
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>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.
