この記事は、CSS Advent Calendar 2018 - Qiitaの14日目の記事です。
成果物
CodePen - Mouse Cursor Jamming
"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の設定をできないようにする)
おわりおしり