Socket
Socket
Sign inDemoInstall

custom-cursor

Package Overview
Dependencies
0
Maintainers
1
Versions
37
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

custom-cursor

Create your own custom cursor with minimal JavaScript 👆


Version published
Maintainers
1
Created

Readme

Source

Custom Cursor 👆

This is a tiny JavaScript package that creates custom cursor for you with minimal JavaScript and allows you to write hover effects for the cursor(s) in CSS.

Using with a Package Manager

If you're working with a package manager then you can install and run this package with the following code.

yarn add -D custom-cursor

npm install -D custom-cursor
import Cursor from 'custom-cursor'

new Cursor({})

Using with a CDN

For this package to work with a CDN you have to call the Cursor class on the window object.

<script
  defer
  src="https://unpkg.com/custom-cursor@latest/dist/cursor.min.js"
></script>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    new window['Cursor']({})
  })
</script>

🚀 You can still use the count and targets options when using the CDN.

Options

There are two options that you can pass to new Cursor({}), but they are both optional.

new Cursor({
  count: 5,
  targets: ['a', '.title', '#header'],
})

Count

This allows you to control how many cursor are created, perfect for follow along cursor effects.

If we use the example of 5 then it will result in the following HTML.

<div data-cursor="0" style="..."></div>
<div data-cursor="1" style="..."></div>
<div data-cursor="2" style="..."></div>
<div data-cursor="3" style="..."></div>
<div data-cursor="4" style="..."></div>

We can use the [data-cursor] attributes to write CSS.

[data-cursor] {
  width: 20px;
  height: 20px;
}

[data-cursor='0'] {
  background: #00f;
}

[data-cursor='1'] {
  background: #eee;
}

Targets

This allows you to control which HTML elements on the page you want the cursor to have a hover effect for.

If we use the example of ['a', '.title', '#header'], it will do the following.

  1. Find every <a>, <... class="title"> and <... id="header"> element on the page
  2. Listen for mouseover and mouseleave events on those elements
  3. When mouseover is triggered append cursor-hover--<target> to the body element

<target> will be the identifier give in the targets array, therefore if the .title was triggered it would add cursor-hover--title.

Styling Hover Effects

Taking the previous example, we could use the following CSS to create hover effects for the cursor(s).

.cursor-hover--a [data-cursor] {
}

.cursor-hover--title [data-cursor] {
}

.cursor-hover--header [data-cursor] {
}

.cursor-hover--header [data-cursor='0'] {
}

.cursor-hover--header [data-cursor='1'] {
}

Stats

Keywords

FAQs

Last updated on 04 Apr 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc