940 views
この記事は最終更新から 1525日 が経過しています。
1. やりたいこと
CSSで色々なアニメーションを作ったが @keyframes で時間経過に応じてパラメータを変化させるものばかりだった。
でも…
@keyframes を使わなくてもアニメーションさせられる。
今回は、簡単なコードで
マウスに追従するボール
を作ってみたい。
2. やってみる
とっても簡単だった。
たったのこれだけだ。
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<span id="anim">●</span>
</body>
</html>
style.css
#anim{
position: absolute;
transition: transform 1s; /* 1秒間かけて実行させる */
}
script.js
window.onload = function() {
const elem = document.getElementById('anim');
// マウス移動イベントを捕捉
document.addEventListener('mousemove', function(e){
// 「ボールの表示座標 = マウスの表示座標」とする。
elem.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
// ※このとき、ボールには「1秒間かけて実行させる」指定をしているので、ゆっくりと動く。
});
}
6行目の文字列の作り方は テンプレートリテラル なるもの。いちいち文字列を + で連結しなくてもよいので楽ちんだ。
過去記事 (106) JavaScriptで複数行文字列を書く。 でご紹介している。
実際に動いている様子を以下のページで確認できる。
https://www.dogrow.net/hp/sample/00114/
script.jsのコメントに書いてある通り、JavaScriptでは
1) マウス移動イベントを捕捉
2) ボールの座標としてマウスの座標を設定
だけをしている。
すると…
style.cssではボールに対して
transition設定されたら 1秒間かけて実行せよ
と命じてあるので、マウスを追ってゆっくりとアニメーションする。
これが今回の肝かもしれない。
アクセス数（直近7日）: ※試験運用中、BOT除外簡易実装済2026-05-13: 0回 2026-05-12: 1回 2026-05-11: 0回 2026-05-10: 0回 2026-05-09: 0回 2026-05-08: 0回 2026-05-07: 0回