この記事は、CSS Advent Calendar 2018 - Qiitaの14日目の記事です。

成果物

"CLICK ME!"ボタンに近づけば近くほどマウスカーソルがあらぶります。それだけ。
もちろんスマホはカーソルが表示されないため非対応(?)

どうやって実装しているか

マウスカーソルの位置を変更することはブラウザではできません。
そもそもそれができたらセキュリティ的に怖いことになります。

今回実装したのは擬似的にマウスカーソルをいじっているように見せかけているだけです。

やっていることはこれ↓だけ

まず、ブラウザ上では以下のコードでマウスカーソルを消すことができます。ちなみにcursor: url(...)で独自のカーソルに変えられます。

<div class="target">...<div>
<style>
.target {
  cursor: none
}
</style>

また、ブラウザ上ではマウスカーソルの位置を取得できます。

viewElement.addEventListener('mousemove', (mouse) => {
  console.log(mouse.pageX, mouse.pageY)
  ...
})

これでやりたいようにできます。

See the Pen Mouse Cursor Jamming by いーふとイチオカ🔰(@redshoga) (@redshoga) on CodePen.

なんでこれを作ろうと思ったかというと、以前どっかの怪しいサイトでやられたからです。

その時は「マウスがジャックされた！！」って思ったんですが、なんやこれマウスカーソル非表示にしてる↑みたいにしてるだけやんけ!ってすぐ気がつきました。

ただあまりリテラシーのない人とかがウェブサイトに入って「ウィルスにかかりました！ほらマウスカーソルが乗っ取られてるでしょ!」みたいな言われたら、パニクってなにするかさせられるかわからない。だから、cursorプロパティでカーソルいじれるってある種の脆弱性だと思います。

そんなこともあってcursorプロパティは廃止にした方がいいと思うんです。(もしくはnoneやurlの設定をできないようにする)

~~おわり~~おしり