Interactive Custom Cursors In JavaScript And CSS/CSS3 – Kursorjs

Preview:

Description:

Kursorjs is a small JavaScript library used for creating custom interactive cursors on the webpage.

It currently comes with 5 cursor styles and is easy to customize using your own CSS/CSS3.

How to use it:

Install & download.

# NPM
$ npm install kursor --save

Import the Kursorjs library into your html file.

<link rel="stylesheet" href="./dist/kursor.css">
<script src="./dist/kursor.js"></script>
<!-- or from a CDN -->
<script src="//unpkg.com/kursor"></script>

Initialize the Kursorjs and specify the cursor type you want to use (1-5).

var kursorx = new kursor({
    type: 3
})

Customize the color of the custom cursor.

var kursorx = new kursor({
    type: 1,
    color: 'rgba(200,100,0)'
})

Decide whether to hide the default cursor.

var kursorx = new kursor({
    type: 1,
    removeDefaultCursor: true
})

You can also attach the custom cursor to a specific container.

var kursorx = new kursor({
    type: 1,
    el: '.myContainer'
})

Show/hide the custom cursor programmatically.

kursorx.hidden();
kursorx.hidden(false);

More previews:

Type 2

Type 3

Type 4

ype 5

Changelog:

05/18/2019

• v0.1.1