Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gaoryrt/cursor-dot
🖱️Fancy cursor dot
https://github.com/gaoryrt/cursor-dot
cursor cursor-dot cursor-moves cursors follow following
Last synced: 3 months ago
JSON representation
🖱️Fancy cursor dot
- Host: GitHub
- URL: https://github.com/gaoryrt/cursor-dot
- Owner: gaoryrt
- License: mit
- Created: 2019-06-25T07:41:33.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:58:12.000Z (about 2 years ago)
- Last Synced: 2024-08-02T18:43:01.905Z (7 months ago)
- Topics: cursor, cursor-dot, cursor-moves, cursors, follow, following
- Language: JavaScript
- Homepage: https://codesandbox.io/s/focused-ellis-g9mpm
- Size: 3.24 MB
- Stars: 99
- Watchers: 1
- Forks: 10
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# cursor-dot
> A vanilla JavaScript library which creates customizable, interactive cursor effects when hovering over certain elements.
[](https://saythanks.io/to/gaoryrt)

English | [简体中文](./README.zh-cn.md)
## Installation 🏗️
### A: yarn or npm
```bash
$ yarn add cursor-dot
```
or
```bash
npm i cursor-dot
```
then you can:
```js
import curDot from 'cursor-dot'
```
in your js files.### B: use `window.curDot.min.js` file
Download `dist/window.curDot.min.js` file into your project, and in your html file:
```html```
then you can use `window.curDot`## Usage 🍹

```js
const cursor = curDot()
// or, set as you want
// cursor({
// zIndex: 2,
// diameter: 80,
// borderWidth: 1,
// borderColor: 'transparent',
// easing: 4,
// background: '#ddd'
// })
```
---

```js
cursor.over('span.selector', {
borderColor: 'rgba(255,255,255,.38)',
broderWidth: 2
})cursor.over($('El'), {
scale: .5,
background: '#fff'
})
```## [Give it a try](https://codesandbox.io/s/focused-ellis-g9mpm)