dpk_cursor

1.0.7 • Public • Published

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

Package Sidebar

Install

npm i dpk_cursor

Weekly Downloads

0

Version

1.0.7

License

MIT

Unpacked Size

285 kB

Total Files

9

Last publish

Collaborators

  • dushyant1295