JavaScriptマウスアニメーション 初心者向け

JavaScriptを使って簡単なマウスアニメーションを作成する方法をいくつか紹介します。これらのアニメーションは、ユーザーのマウスの動きに反応して、インタラクティブなエフェクトを実現できます。

1. マウスフォロワーアニメーション

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

マウスフォロワーは、マウスカーソルを追従するオブジェクトを表示するアニメーションです。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mouse Follower</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #282c34;
    }
    .follower {
      width: 20px;
      height: 20px;
      background-color: #61dafb;
      border-radius: 50%;
      position: absolute;
      pointer-events: none;
      transition: transform 0.1s ease;
    }
  </style>
</head>
<body>
  <div class="follower"></div>

  <script>
    const follower = document.querySelector('.follower');

    document.addEventListener('mousemove', (e) => {
      follower.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
    });
  </script>
</body>
</html>

解説

HTML: div要素にfollowerというクラスを付け、スタイルで円形の追従オブジェクトを定義しています。
CSS: .followerクラスにより、背景色を設定し、円形のボックスを作成します。pointer-events: noneでこの要素がマウスイベントを受け取らないようにし、transitionでスムーズな移動効果を実現しています。
JavaScript: mousemoveイベントを監視し、マウスの位置に基づいてfollowerの位置を更新しています。e.clientXとe.clientYで、マウスの現在位置を取得し、translateで追従オブジェクトをその位置に移動させます。

2. ホバーエフェクトアニメーション

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

ホバーエフェクトは、マウスが特定の要素に乗ったときに発動するアニメーションです。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hover Effect</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #282c34;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: #61dafb;
      transition: transform 0.3s ease;
    }
    .box:hover {
      transform: scale(1.5) rotate(45deg);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

解説

HTML: 単純なdiv要素で四角形のボックスを作成しています。
CSS: .boxクラスでボックスのスタイルを設定し、hover疑似クラスを使って、マウスが乗ったときにスケールと回転のアニメーションを追加しています。transitionでアニメーションのスムーズさを調整しています。

3. マウスパララックスエフェクト

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

マウスパララックスエフェクトは、マウスの動きに応じて背景やオブジェクトが異なるスピードで動くことで、深みのある視覚効果を作り出します。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Parallax Effect</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      height: 100vh;
      background-color: #282c34;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .layer {
      position: absolute;
      width: 300px;
      height: 300px;
    }
    .layer1 {
      background-color: rgba(97, 218, 251, 0.7);
      transform: translateZ(0px);
    }
    .layer2 {
      background-color: rgba(97, 218, 251, 0.5);
      transform: translateZ(-50px);
    }
    .layer3 {
      background-color: rgba(97, 218, 251, 0.3);
      transform: translateZ(-100px);
    }
  </style>
</head>
<body>
  <div class="layer layer1"></div>
  <div class="layer layer2"></div>
  <div class="layer layer3"></div>

  <script>
    document.addEventListener('mousemove', (e) => {
      const layers = document.querySelectorAll('.layer');
      layers.forEach((layer, index) => {
        const speed = index * -50;
        const x = (window.innerWidth - e.pageX * speed) / 100;
        const y = (window.innerHeight - e.pageY * speed) / 100;

        layer.style.transform = `translateX(${x}px) translateY(${y}px)`;
      });
    });
  </script>
</body>
</html>

解説

HTML: 複数のdiv要素をレイヤーとして設定し、それぞれに異なるクラスを付与しています。
CSS: 各レイヤーのスタイルを設定し、異なるtranslateZ値を使って、視差効果を表現しています。
JavaScript: mousemoveイベントを使用して、マウスの位置に基づいてレイヤーを異なるスピードで移動させます。各レイヤーに対して、transformプロパティを更新し、視差効果を作り出しています。

これらのサンプルを元にして、さらに複雑なマウスインタラクションを試してみることができます。マウスアニメーションは、ユーザー体験を豊かにし、サイトやアプリケーションに魅力的なエフェクトを追加するための強力なツールです。