Add dpkCursor.min.css or CDN dpkCursor.min.css
Add dpkCursor.min.js or CDN dpkcursor.min.js
<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>
npm install dpk_cursor
import { dpkCursor } from "dpk_cursor/src/dpkCursor";
const customCursor = new dpkCursor({ ease: 0.25 });
| 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 |
| Name | Parameter | Defaults | Desc |
|---|---|---|---|
init() |
- | initialization | |
effect() |
- | - | Use the Effects |
reset() |
- | - | reset dpkCursor |
destroy() |
- | - | delete dpkCursor |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent