マウスと共に動くJavaScriptのテキストを実装するには？

2年 ago
芽依, 雨夜
1 minute

テキストがマウスカーソルの動きに追従するエフェクトを作成するには、以下の手順に従います。

  1. 文字を格納するためのdiv要素を作成します。
  2. マウスの移動イベントをリスンして、マウスの現在の位置を獲得する。
  3. 文字の位置をカーソルの位置にする
  4. CSSスタイルを使用して、テキストのスタイルと位置を制御します。

以下にサンプルコードを示します。

HTML

<div id="follow">Follow me</div>

CSS

#follow {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 20px;
}

ネイティブに自然な日本語で言い換えてください。

var follow = document.getElementById('follow');

window.addEventListener('mousemove', function(event) {
  var x = event.clientX;
  var y = event.clientY;
  
  follow.style.left = x + 'px';
  follow.style.top = y + 'px';
});

上記のコードでは、最初にgetElementByIdメソッドでfollowというdiv要素を取得し、次にaddEventListenerメソッドを使用してmousemoveイベントを監視します。マウスが移動すると、イベントコールバック関数がトリガーされ、コールバック関数内でマウスの現在の位置を取得し、テキストの位置をマウスの位置に設定します。

bannerAds