dpkCursor.js

High performance smooth custom cursor library that helps you to create cool things.

Play with Codepen

How to use:

CSS

Add dpkCursor.min.css or CDN dpkCursor.min.css

JAVASCRIPT

Add dpkCursor.min.js or CDN dpkcursor.min.js

USAGE

<link rel="stylesheet" href="dpkCursor.min.css" />

<div class="dpk-hover" data-hover-text="Hello"> Text </div>
<div class="dpk-hover" data-hover-class="class-name"> Add class to cursor </div>
<div class="dpk-hover" data-hover-bg="#222"> Background Color </div>
<div class="dpk-hover" data-hover-img="img/a.png"> Add Image As Background </div>

<script src="dpkCursor.min.js"></script>

<script>
    const customCursor = new dpkCursor({ ease: 0.25 });
</script>

Installation Using NPM

npm install dpk_cursor

import { dpkCursor } from "dpk_cursor/src/dpkCursor";

const customCursor = new dpkCursor({ ease: 0.25 });

HTML Element attributes

Attribute	Values	Description
data-hover-text	string	text inside Cursor
data-hover-class	string	add class to Cursor
data-hover-bg	color- name/code	bg Color of Circle
data-hover-img	img/path	img inside Cursor

dpkCursor Provides Following Functions

Name	Parameter	Defaults	Desc
init()	-		initialization
effect()	-	-	Use the Effects
reset()	-	-	reset dpkCursor
destroy()	-	-	delete dpkCursor