cssうんちをストーカーさせてみた

マウスストーカー

マウスに追従するようなアニメーションのことをマウスストーカーというらしい。
というわけでうんち追従させてやんよ💩
単純にマウスカーソルを💩画像にするのは面白くないので、そこは違う形で実装するぞ！

Let's Try

↓画面内でマウスを動かしてみよう！

See the Pen unchi-stalker by petapetapeta (@petapetapeta) on CodePen.

ポイント

html(pug)

htmlでカーソルのポイント用の要素を2つ用意する
1つはその時のマウスポイントの位置を表示する要素(.cursor-small)、もう1つは遅延で追従する要素だ(.cursor-big)

# app
  .cursor(v-show="!isOut")
    .cursor-small(ref="cursorSmall")
    .cursor-big.unchi(ref="cursorBig")

css(stylus)

デフォルトのカーソルはいらないのでnoneで消してしまいます。

body
  cursor none !important

.cursor-smallは今回は円、.cursor-bigはうんちのcssを書き、初期に表示されないように画面外にポジションを設定しておきます。

javascript

一番のポイントはmousemoveのイベントでマウス位置を取得し、その位置に.cursor-smallをもってくる＋.cursor-bigは前回のマウス位置と現在のマウス位置でちょこっと計算をはさみ、遅延させるようにすることです。
あとはmouseleaveのイベントで要素を非表示にするようにしておくと画面外にマウスカーソルが出た時にうんちが残ってしまうということがなくなるぞ💩