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 |