基本の流れ
- 「初級」「中級」「上級」「上級＋」「キャラ」から段を選び、動きを1つ選ぶ
- 見本のページの上でマウスを動かし、リンクやボタンにも乗せて確かめる
- 右の設定で色・大きさ・遅れを変える
- 「コードをコピー」を押して、自分のサイトに貼る（キャラの段は画像もダウンロードする）
段の違い
| 段 | 使うもの | 向いている人 |
|---|---|---|
| 初級 | CSS と数行の JavaScript | まず1つ入れてみたい人。貼るだけで動きます |
| 中級 | 素の JavaScript | 粒が散る・しっぽが伸びるなど、演出を足したい人 |
| 上級 | GSAP（CDN の1行付き） | ボタンに吸い付く、液体のようにくっつくなど、なめらかな動きが欲しい人 |
| 上級＋ | Three.js（WebGL）。CDN の読み込みもコードに入っています | フルイド・グリッチ・マスクリビール・ディゾルブなど、画面や画像そのものを動かしてサイトの印象を決めたい人 |
| キャラ | Blender で描いた立体のキャラや小物の画像（向きと動作のコマ） | 歩く・跳ねる・眠るキャラで、親しみやすいサイトにしたい人 |
貼り方
いちばん簡単なのは「まとめて」のコードを、HTML の </body> の直前に貼る方法です。
スタイルとスクリプトが1つにまとまっているので、ほかの場所を触る必要はありません。
CSS と JavaScript をファイルに分けて管理しているサイトでは、タブを切り替えて「HTML」「CSS」「JS」を別々にコピーし、それぞれのファイルに足してください。 上級のコードは GSAP を CDN から読み込む1行が HTML 側に入っています。すでに GSAP を読み込んでいるサイトでは、その1行は不要です。
キャラの段は、「素材をダウンロード」で取った画像を、貼ったページから見て images フォルダの中に置きます。
別の場所に置く場合は、コードの中の images/… を置いた場所に合わせて書き換えてください。
上級＋の段は Three.js を CDN から読み込むので、ほかの段より重くなります（スマホでは動きません）。
「グリッチ」「マスクリビール」「ディゾルブ」は、ページの img 要素と、data-stalker-gl 属性を付けた背景画像の要素に効きます。
透けて見せる2枚目の画像は、その要素に data-stalker-reveal="images/2枚目.webp" のように指定します（指定が無いときは白黒にした同じ画像が透けます）。
リンクの上で形を変える場所を増やす
「リンクで膨らむ」「文字入りの円」「マグネットカーソル」は、a と button の上で形が変わります。
カードなど、ほかの要素でも反応させたいときは、その要素に data-stalker 属性を付けてください。
<div class="card" data-stalker>…</div>よくある質問
WordPress にマウスストーカーを入れるには？
「まとめて」のコードを、テーマの footer.php の </body> の直前か、ヘッダーやフッターにコードを足せるプラグインのフッター欄に貼ります。
テーマを直接書き換える場合は、子テーマで行うと更新で消えません。
スマホではどうなりますか？
何もしません。書き出すコードは、マウスで操作する端末（hover: hover かつ pointer: fine）のときだけ動き、スマホやタブレットではいつもの表示のままです。
端末で「視差効果を減らす」などの動きを減らす設定をしている人にも、何もしません。
サイトが重くなりませんか？
位置の更新は requestAnimationFrame の中で transform だけを書き換えるので、ページのレイアウトをやり直さず軽く動きます。
キラキラやハートは一定の距離を動いたときだけ粒を出し、消えた粒は取り除きます。
元の矢印は消したほうがいいですか？
どちらでも構いません。消すと見た目はすっきりしますが、押せる場所が分かりにくくなることがあります。 消すなら「リンクで膨らむ」「文字入りの円」「マグネットカーソル」のように、リンクの上で形が変わるものと組み合わせるのがおすすめです。
GSAP は無料で使えますか？
使えます。GSAP は2025年から、商用のサイトも含めて無料で使えるようになりました。 上級のコードは CDN から読み込む1行が入っているので、そのまま貼れば動きます。
キャラの段の画像は商用のサイトで使えますか？
使えます。個人・商用を問わず無料で、クレジットの表記も要りません。ただし画像そのものを素材として再配布・販売することは禁止しています。
自分のロゴや画像を付いてこさせるには？
初級の「絵文字・画像」を選び、HTML の span の中身を img 要素に替えれば、同じ動きで画像が付いてきます。
向きや回転で絵を切り替えたいときは、キャラの段と同じくコマを並べた画像を用意し、CSS の background の URL を差し替えます。
仕組みを詳しく知りたい
マウスの位置に少しずつ近づける計算や、リンクの上で形を変える書き方は マウスストーカーの実装方法の記事で解説しています。