Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/markmead/custom-cursor
Create your own custom cursor with minimal JavaScript 👆
https://github.com/markmead/custom-cursor
cursor custom-cursors javascript
Last synced: 17 days ago
JSON representation
Create your own custom cursor with minimal JavaScript 👆
- Host: GitHub
- URL: https://github.com/markmead/custom-cursor
- Owner: markmead
- License: mit
- Created: 2019-05-13T17:36:32.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-04-04T10:46:18.000Z (7 months ago)
- Last Synced: 2024-10-14T08:24:38.589Z (about 1 month ago)
- Topics: cursor, custom-cursors, javascript
- Language: TypeScript
- Homepage:
- Size: 464 KB
- Stars: 21
- Watchers: 1
- Forks: 2
- 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.
## 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.
```sh
yarn add -D custom-cursor
npm install -D custom-cursor
```
```js
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.
```html
document.addEventListener('DOMContentLoaded', () => {
new window['Cursor']({})
})
```
🚀 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.
```js
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.
```html
```
We can use the `[data-cursor]` attributes to write CSS.
```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.
`` 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).
```css
.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'] {
}
```
## Stats
