マウスストーカー
マウスに追従するようなアニメーションのことをマウスストーカーというらしい。
というわけでうんち追従させてやんよ💩
単純にマウスカーソルを💩画像にするのは面白くないので、そこは違う形で実装するぞ!
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
のイベントで要素を非表示にするようにしておくと画面外にマウスカーソルが出た時にうんちが残ってしまうということがなくなるぞ💩