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秒間かけて実行せよ
と命じてあるので、マウスを追ってゆっくりとアニメーションする。
これが今回の肝かもしれない。

(114) CSSの translateで要素を動かすアニメーションができる。

1. やりたいこと

2. やってみる

コメントを残すコメントをキャンセル

1. やりたいこと

2. やってみる

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル