4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

開発者の環境や技術Advent Calendar 2019

Day 20

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

Last updated at Posted at 2019-12-20

マウスストーカー

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

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のイベントで要素を非表示にするようにしておくと画面外にマウスカーソルが出た時にうんちが残ってしまうということがなくなるぞ💩

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?