Interacitve Cursor Effect In Vanilla JavaScript – cursor-dot

Category: Javascript , Recommended | July 1, 2019
Author: gaoryrt
Views Total: 2,825 views
Official Page: Go to website
Last Update: July 1, 2019
License: MIT

Preview:

Interacitve Cursor Effect In Vanilla JavaScript – cursor-dot

Description:

cursor-dot is a vanilla JavaScript library which creates customizable, interactive cursor effects when hovering over certain elements.

How to use it:

Install and import the library.

# Yarn
$ yarn add cursor-dot

# NPM
$ npm install cursor-dot --save
import curDot from 'cursor-dot'

Initialize the cursor-dot library and you’re ready to go.

const cursor = cursorDot({
      // options here
})

Apply custom styles to the cursor effect when hovering over different elements.

cursor.over(".element-1", {
  background: "#fff"
});

cursor.over(".element-2", {
  borderColor: "rgba(255,255,255,.38)"
});

cursor.over(".element-3", {
  scale: 0.5,
  background: "#fff"
});

All default config options.

const cursor = cursorDot({

      // diameter in pixels
      diameter: 80,

      // border width
      borderWidth: 1,

      // border color
      borderColor: '#fff',

      // easing
      easing: 4,

      // background
      background: 'transparent'
      
})

You Might Be Interested In:


Leave a Reply