https://github.com/markmead/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 ð
https://github.com/markmead/custom-cursor
cursor custom-cursor interactive
Last synced: 8 months ago
JSON representation
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 ð
- Host: GitHub
- URL: https://github.com/markmead/custom-cursor
- Owner: markmead
- License: mit
- Created: 2019-05-13T17:36:32.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2025-03-07T13:44:31.000Z (8 months ago)
- Last Synced: 2025-03-18T06:47:35.507Z (8 months ago)
- Topics: cursor, custom-cursor, interactive
- Language: JavaScript
- Homepage:
- Size: 288 KB
- Stars: 23
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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.
## Features
- ðŠķ Lightweight (< 1kb minified)
- ðĻ Fully customizable with CSS
- ⥠Simple API with minimal configuration
- ð Multiple cursor support for follow-along effects
- ðŊ Target specific elements for custom hover states
- ðą Works with mouse and touch devices
Perfect for creative websites, portfolios, and interactive experiences where you
want to replace the default cursor with something more engaging.
## Install
## CDN
For this package to work with a CDN, you'll need to access the `Cursor` class
from the `window` object.
```html
document.addEventListener('DOMContentLoaded', () => {
new window['Cursor']({})
})
```
### Configuration with CDN
When using the CDN version, you still have full access to all configuration
options:
```js
document.addEventListener('DOMContentLoaded', () => {
new window['Cursor']({
count: 3, // Creates multiple cursor elements
targets: ['a', 'button', '.interactive'], // Elements that trigger hover states
})
})
```
These options work exactly the same way as in the package version, giving you
complete control over your custom cursor behavior.
## Package
```shell
yarn add -D custom-cursor
npm install -D custom-cursor
```
```js
import Cursor from 'custom-cursor'
new Cursor({})
```
## Options
The `Cursor` constructor accepts an optional configuration object with two
parameters:
```js
new Cursor({
count: 5, // Creates multiple cursor elements
targets: ['a', '.title', '#header'], // Elements that trigger hover states
})
```
Both parameters are optional and can be customized to fit your specific
requirements.
### Count
This parameter lets you specify the number of cursor elements to create, which
is ideal for creating trailing cursor effects.
When you set `count: 5`, the package generates the following HTML structure:
```html
```
Each cursor element receives a `data-cursor` attribute with its index number,
allowing you to style each cursor element individually with CSS:
```css
[data-cursor] {
width: 20px;
height: 20px;
}
[data-cursor='0'] {
background: #00f;
}
[data-cursor='1'] {
background: #eee;
}
```
This approach gives you complete control over the appearance of each cursor in
the sequence, creating trailing effects, size variations, or color gradients.
### Targets
The `targets` parameter lets you define specific HTML elements that will trigger
cursor hover effects.
For example, with `targets: ['a', '.title', '#header']`, the package will:
The `` portion of the class name corresponds to the identifier in your
targets array. For instance, hovering over `.title` elements will add
`cursor-hover--title` to the body.
#### Creating Hover Styles
You can style cursor hover states using the added class names. For example:
```css
/* Style all cursors when hovering over links */
.cursor-hover--a [data-cursor] {
}
/* Style all cursors when hovering over elements with .title class */
.cursor-hover--title [data-cursor] {
}
/* Style all cursors when hovering over element with #header ID */
.cursor-hover--header [data-cursor] {
}
/* Style specific cursors by index during hover */
.cursor-hover--header [data-cursor='0'] {
}
.cursor-hover--header [data-cursor='1'] {
}
```
This approach gives you fine-grained control over cursor appearance during
different hover interactions.