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

cursor-dot's Issues

Any re-initialize or destroy methods?

Hello,

is there any way to re-initialize or destroy programmatically?

Thanks for sharing this.
Best regards.

cursor-dot does not deactivate on mobile

How do i deactivate it from showing on mobile screens?

No zIndex property.

Imposible to set z-index.

Style doesn't change when scrolling

https://www.chromestatus.com/feature/5697181675683840

Inverted colors in Safari (13.1.2) and Firefox (80.0.1)

All values specified in "const cursor = curDot" are reversed in Safari and Firefox.

Example :

background: "#000000" => show rendering background: "#ffffff"

Visibility on mobile

Currently the cursor-dot is displayed on each tap on mobile. How can we hide it?