単にイラッとするだけですが・・・カーソルを追いかける「紫色の丸」を作ってみました。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>カーソルを追いかける紫丸</title>
<style type="text/css">
body {
margin: 0;
background-color: #f5fffa; /* mintcream */
overflow: hidden;
}
/*
画面設定
*/
#FunnyCircle {
width: 30px;
height: 30px;
background-color: #8a2be2; /* blueviolet */
position: absolute;
border-radius: 50%;
pointer-events: none;
/*
カーソルの設定
カーソルが要素上にあるときはクリック等のイベントを無効化
*/
}
</style>
</head>
<body>
<div id="FunnyCircle"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const FunnyCircle = document.getElementById("FunnyCircle");
/*
DOMContentLoadedは、HTMLの読み込み後に
DOMツリー構築の完了時に発生するイベント
ここではbluevioletの●（FunnyCircle）
*/
document.addEventListener("mousemove",
function(event) {
const mouseX = event.clientX;
const mouseY = event.clientY;
/*
addEventListenerとは、指定対象に対する設定。
特定のイベントが実行される毎に呼び出される
関数や処理を設定し、全体の動きを管理
ここではマウスカーソルの動き
*/
FunnyCircle.style.transform =
`translate(${mouseX}px, ${mouseY}px)`;
// カーソルの位置を取得し、要素を移動させる
});
});
</script>
</body>
</html>
<!-- index.html -->
表示するとかなりイラッとします。
