@rm-labo/mouse-stalker v1.0.3

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.

<!-- 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

Options

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