gaoryrt / cursor-dot

🖱️Fancy cursor dot

cursor-dot

A vanilla JavaScript library which creates customizable, interactive cursor effects when hovering over certain elements.

English | 简体中文

Installation 🏗️

A: yarn or npm

$ yarn add cursor-dot

or

npm i cursor-dot

then you can:

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:

<script src="path/to/your/window.curDot.min.js"></script>

then you can use window.curDot

Usage 🍹

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

---

cursor.over('span.selector', {
  borderColor: 'rgba(255,255,255,.38)',
  broderWidth: 2
})

cursor.over($('El'), {
  scale: .5,
  background: '#fff'
})

Give it a try