Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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)