mouse-stalker

| Statements | Branches | Functions | Lines | | --------------------------- | ----------------------- | ------------------------- | ----------------- | | | | | |

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

Demo

demo page is here

Install

$ npm i @rm-labo/mouse-stalker

Usage

import MouseStalker from '@rm-labo/mouse-stalker'

const opt = {
  // ... options ...
}

MouseStalker.init(opt)

Default options

{
  mouseElementClassName: 'mouse-stalker-root',
  pointerElementClassName: 'mouse-stalker-pointer',
  iconTargetElementClassName: 'mouse-stalker-icon-target',
  pageBaseColor: '#ffffff',
  pointerColor: 'rgba(0,0,0,1)',
  pointerSize: 24,
  zIndex: '9999',
  hoveringExpansionRatio: 2,
  hoveringBorderWidth: 1,
  scoped: false,
  targetSelectorsDataName: 'data-st-target',
  hoveringIconName: 'data-st-icon-name',
  hoveringIconAnimationName: 'data-st-icon-animation-name',
}

hover effects

About designation of Effects.

| Name of data attribute | | | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | data-st-target | If the mouse cursor hovers over an element with this attribute, the MouseStalker is increased by the ratio of hoveringExpansionRatio. | | data-st-icon-name | By specifying the name of the iconify.design, the mouse cursor can display the icon. | | data-st-icon-animation-name | Specifies how the icon is to be displayed. |

<!-- hover effects example -->
<button data-st-target>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-mode is used to draw the mouse pointer. Therefore, background-color must be specified in the body tag.

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

Note that Option.pageBaseColor is 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 |