mouseStalker

好きな要素をポインタ（マウス/タッチ）の動きに追従させる。（PCのみ）追従にはイージング（lerp）による遅延を付けて「一瞬遅れてついてくる」動きにする。countで数珠つなぎのトレイルに、directionで移動方向への傾きに、targetsで出現範囲をマスクできる。ページ全体（ブラウザの外）からポインタが出るとフェードアウトする（fadeDurationで調整可）。

Init Options

Option	Type	Default	Description
`container`	`string`	`'.js-mouseStalker'`	追従させる要素のセレクタ。ページ内で固有のID。
`count`	`number`	`1`	追従要素の複製数。2以上にすると、後ろの要素が前の要素を追いかける数珠つなぎのトレイルになる。
`ease`	`number`	`0.15`	追従の緩さ（0〜1）。値が小さいほどゆっくり遅れて追従し、1に近いほど遅延がなくなる。（動き自体のeagingは未設定）
`offsetX / offsetY`	`number`	`0`	ポインタ位置からの表示ずらし（px）
`direction`	`boolean`	`false`	移動方向に応じて要素を傾ける（真上の移動でrotate(0deg)、真右でrotate(90deg)）。回転はjs-mouseStalker__innerで指定した要素に適用される。
`inner`	`string`	`'.js-mouseStalker__inner'`	direction での回転対象のセレクタ（1要素想定）。見つからなければ1つ目の子要素。
`targets`	`string[] \| null`	`null`	出現させる範囲を要素のセレクタ配列で絞り込む。指定した要素と重なっている部分だけが見えるマスクになる。未指定なら画面全体で常時出現する。
`fadeDuration`	`number`	`300`	ページ全体（ブラウザの外）からポインタが出た際にフェードアウトする時間（ms）

HTML Classes

Class	Type	Default	Description
`.js-mouseStalker`	`class`	`—`	追従させたい要素に付与する。position: fixed / top: 0 / left: 0 / pointer-events: none / z-index: 9999 はJSが自動付与する
`.js-mouseStalker__inner`	`class`	`—`	direction で回転させたい部分に付与する（省略時は1つ目の子要素）

Demos

エリア内にポインタを合わせると追従要素が出現する（targetsによるマスク）。エリアから出ると隠れ、他のデモとは干渉しない。

1. デフォルト

セレクタに .js-mouseStalker を付与して呼び出すだけ。ease / count / offset / direction はすべて既定値。

コードを見る

<div class="p-mouseStalker__area">
  <div class="js-mouseStalker">
    <div class="p-mouseStalker__dot"></div>
  </div>
</div>

import { mouseStalker } from 'form-snippets';
mouseStalker({ targets: ['#mouseStalkerBasic'] });

2. ease（追従の緩さ）

同じエリア内で ease を変えた2つの要素を比較できる。青（ease: 0.04）はゆっくり大きく遅れ、オレンジ（ease: 0.5）はほぼ遅延なく追従する。

コードを見る

<div class="js-mouseStalker--easeSlow"><div class="p-mouseStalker__dot p-mouseStalker__dot--slow"></div></div>
<div class="js-mouseStalker--easeFast"><div class="p-mouseStalker__dot p-mouseStalker__dot--fast"></div></div>

mouseStalker({ container: '.js-mouseStalker--easeSlow', ease: 0.04, targets: ['#mouseStalkerEase'] });
mouseStalker({ container: '.js-mouseStalker--easeFast', ease: 0.5, targets: ['#mouseStalkerEase'] });

3. count（数珠つなぎ）

countで要素を複製すると、後ろの要素が1つ前の要素を追いかけるトレイルになる。

コードを見る

<div class="js-mouseStalker--count"><div class="p-mouseStalker__dot p-mouseStalker__dot--trail"></div></div>

mouseStalker({
container: '.js-mouseStalker--count',
count: 8,
ease: 0.3,
targets: ['#mouseStalkerCount'],
});

4. offsetX / offsetY

グレーの要素は offset なし（ポインタの位置そのもの）、ピンクの要素は offsetX/offsetY で左上方向にずらしている。

コードを見る

<div class="js-mouseStalker--offsetRef"><div class="p-mouseStalker__dot p-mouseStalker__dot--ref"></div></div>
<div class="js-mouseStalker--offsetShift"><div class="p-mouseStalker__dot p-mouseStalker__dot--shift"></div></div>

mouseStalker({ container: '.js-mouseStalker--offsetRef', ease: 0.3, targets: ['#mouseStalkerOffset'] });
mouseStalker({
container: '.js-mouseStalker--offsetShift',
offsetX: -50,
offsetY: -50,
targets: ['#mouseStalkerOffset'],
});

5. direction（移動方向に傾ける）

矢印を .js-mouseStalker__inner で囲むと、その要素だけが移動方向に回転する（コンテナ自身は非回転のまま位置決めする）。

コードを見る

<div class="js-mouseStalker--direction">
  <div class="js-mouseStalker__inner">
    <img class="p-mouseStalker__arrow" src="..." alt="">
  </div>
</div>

mouseStalker({
container: '.js-mouseStalker--direction',
direction: true,
targets: ['#mouseStalkerDirection'],
});

6. targets（マスク）

円はエリアより大きいので、境界をまたぐと重なっている部分だけが見える。targets には複数セレクタを配列で渡せるので、この例では離れた2つのエリアどちらでも同じ要素が出現する。

コードを見る

<div class="js-mouseStalker--targets"><div class="p-mouseStalker__dot p-mouseStalker__dot--big"></div></div>

mouseStalker({
container: '.js-mouseStalker--targets',
targets: ['#mouseStalkerTargetsA', '#mouseStalkerTargetsB'],
});