Package Exports

custom-cursor
custom-cursor/dist/cursor.cjs.js
custom-cursor/dist/cursor.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (custom-cursor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Custom Cursor 👆

This is a tiny JavaScript package that creates custom cursor for you with minimal JavaScript and allows you to write hover effects for the cursor(s) in CSS.

Using with a Package Manager

If you're working with a package manager then you can install and run this package with the following code.

yarn add -D custom-cursor

npm install -D custom-cursor

import Cursor from "custom-cursor"

new Cursor({})

Using with a CDN

For this package to work with a CDN you have to call the Cursor class on the window object.

<script
  defer
  src="https://unpkg.com/custom-cursor@latest/dist/cursor.min.js"
></script>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    new window['Cursor']({})
  })
</script>

🚀 You can still use the count and targets options when using the CDN.

Options

There are two options that you can pass to new Cursor({}), but they are both optional.

new Cursor({
  count: 5,
  targets: ['a', '.title', '#header'],
})

Count

This allows you to control how many cursor are created, perfect for follow along cursor effects.

If we use the example of 5 then it will result in the following HTML.

<div data-cursor="0" style="..."></div>
<div data-cursor="1" style="..."></div>
<div data-cursor="2" style="..."></div>
<div data-cursor="3" style="..."></div>
<div data-cursor="4" style="..."></div>

We can use the [data-cursor] attributes to write CSS.

[data-cursor] {
  width: 20px;
  height: 20px;
}

[data-cursor="0"] {
  background: #00F;
}

[data-cursor="1"] {
  background: #EEE;
}

Targets

This allows you to control which HTML elements on the page you want the cursor to have a hover effect for.

If we use the example of ['a', '.title', '#header'], it will do the following.

Find every <a>, <... class="title"> and <... id="header"> element on the page
Listen for mouseover and mouseleave events on those elements
When mouseover is triggered append cursor-hover--<target> to the body element

<target> will be the identifier give in the targets array, therefore if the .title was triggered it would add cursor-hover--title.

Styling Hover Effects

Taking the previous example, we could use the following CSS to create hover effects for the cursor(s).

.cursor-hover--a [data-cursor] {

}

.cursor-hover--title [data-cursor] {

}

.cursor-hover--header [data-cursor] {

}

.cursor-hover--header [data-cursor="0"] {

}

.cursor-hover--header [data-cursor="1"] {

}

custom-cursor