mouse-stalker

Mouse stalker with simple round design.

The latest source code is available on github.

This library is intended for pointing devices only.
It does not affect any display on touch devices.

This library is intended for pointing devices only. It does not affect any display on touch devices.

Install

$ npm i @rm-labo/mouse-stalker

Usage

pageBaseColor

pointerColor

pointerSize

hoveringExpansionRatio

hoveringBorderWidth

hover effects sample

<button data-st-target>No Icon (Default)</button>
<button data-st-target data-st-icon-name="bxs:cat">Cat</button>
<button data-st-target data-st-icon-name="akar-icons:heart">Heart</button>
<button data-st-target data-st-icon-name="ri:zoom-in-line">Zoom In</button>
<button data-st-target data-st-icon-name="fa-solid:arrow-left" data-st-icon-animation-name="toLeft">Left Arrow</button>
<button data-st-target data-st-icon-name="fa-solid:arrow-up" data-st-icon-animation-name="toTop">Up Arrow</button>
<button data-st-target data-st-icon-name="fa-solid:arrow-down" data-st-icon-animation-name="toBottom">Down Arrow</button>
<button data-st-target data-st-icon-name="fa-solid:arrow-right" data-st-icon-animation-name="toRight">Right Arrow</button>

Methods

Method
`MouseStalker.init(opt)`	Show MouseStalker
`MouseStalker.destroy()`	Remove MouseStalker
`MouseStalker.update(opt)`	Update MouseStalker with opt

Options

Option	Type	Default
`mouseElementClassName`	`string`	`mouse-stalker-root`
`pointerElementClassName`	`string`	`mouse-stalker-pointer`
`iconTargetElementClassName`	`string`	`mouse-stalker-icon-target`
`pageBaseColor`	`string`	`#ffffff`
`pointerColor`	`string`	`rgba(0,0,0,1)`
`pointerSize`	`number`	`24`
`zIndex`	`string`	`9999`
`hoveringExpansionRatio`	`number`	`2`
`hoveringBorderWidth`	`number`	`1`
`scoped`	`boolean`	`false`
`targetSelectorsDataName`	`string`	`data-st-target`
`hoveringIconName`	`string`	`data-st-icon-name`
`hoveringIconAnimationName`	`string`	`data-st-icon-animation-name` (This attribute accepts are `toTop`, `toBottom`, `toRight`, and`toLeft`)

Notes on background color

The mix-blend-modeis used to draw the mouse pointer. Therefore, background-colormust be specified in the bodytag.

body {
  background-color: white; // must be specified
}

Note that Option.pageBaseColoris output for this background color.

Licence

Licensed under MIT license. You are free to use for your personal or commercial projects. However, this program is based on iconify.design and has been extended. Please refer to iconify.design for the license of each icon used internally.

Release notes

Version	Description
`1.0.0`	Launch