Interactive Custom Cursors In JavaScript And CSS/CSS3 – Kursorjs

Category: Javascript | May 18, 2019
Author: lusaxweb
Views Total: 254
Official Page: Go to website
Last Update: May 18, 2019
License: MIT

Preview:

Interactive Custom Cursors In JavaScript And CSS/CSS3 – Kursorjs

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:

Interactive Custom Cursors Kursorjs Type 2

Type 2

Interactive Custom Cursors Kursorjs Type 3

Type 3

Interactive Custom Cursors Kursorjs Type 4

Type 4

Interactive Custom Cursors Kursorjs Type 5

ype 5

Changelog:

05/18/2019

  • v0.1.1

You Might Be Interested In:


Leave a Reply