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: 5 days 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 (almost 2 years ago)
• Last Synced: 2024-08-02T18:43:01.905Z (3 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://travis-ci.org/gaoryrt/cursor-dot.svg?branch=master)

[![Say Thanks!](https://img.shields.io/badge/Say%20Thanks-!-1EAEDB.svg)](https://saythanks.io/to/gaoryrt)

![](https://img.badgesize.io/gaoryrt/cursor-dot/master/index.js)

![](https://img.badgesize.io/gaoryrt/cursor-dot/master/index.js?compression=gzip)

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 🍹

![](./smoothcursorfollowing.gif)

```js

const cursor = curDot()

// or, set as you want

// cursor({

//   zIndex: 2,

//   diameter: 80,

//   borderWidth: 1,

//   borderColor: 'transparent',

//   easing: 4,

//   background: '#ddd'

// })

```

---

![](./customhoverstyles.gif)

```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)