【CSS/JS】マウスの動きに合わせて動く背景やコンテンツの作成方法

こんにちは、Ryohei（@ityryohei）です！

マウスの動きに合わせて動く背景やコンテンツの作成方法のご紹介です。

要素の上でマウスカーソルを移動させると、カーソルの動きに合わせてコンテンツが上下左右に動きます。

具体的には下記のデモのような動きになります。「Mousemove!」と表示された要素の上でマウスカーソルを動かすと、要素の背景とテキストが上下左右にぐりぐりと動くかと思います。

Mousemove | CSS/JS by ryoy (@intotheprogram)
on CodePen.a

本記事では、上記アニメーションの実装方法と、マウスカーソルの座標の取得方法から実際にコンテンツを動かすまで詳しくご紹介していきたいと思います。

では、解説していきます。

マウスカーソルの座標を取得する

JavaScriptでマウスカーソル動いた際に座標を取得します。マウスカーソルが動いた際のイベントはイベントリスナーの「mousemove」で取得します。

JS

//マウスカーソルが動いたイベントを取得して
document.addEventListener('mousemove', event => {
  //処理を実行する
});

イベントの座標を取得する方法はいくつか方法があり、指定するイベントによって帰ってくる値も異なります。「event」で取得することができる座標の値は下記の通りです。

event.offsetX(Y)	要素内の座標を取得します要素の左上が(0, 0)となります
event.clientX(Y)	ブラウザのウィンドウ内の座標を取得しますウィンドウ内の左上が(0, 0)となります
event.pageX(Y)	ページ全体の座標を取得しますページの左上が(0, 0)となります
event.screen(Y)	ディスプレイ全体の座標を取得しますディスプレイの左上が(0, 0)となります

例えばevent.offsetX(Y)を使用してマウスカーソルの座標を取得する場合は下記のようなスクリプトになります。

document.addEventListener('mousemove', event => {
  
  var x = event.offsetX;
  var y = event.offsetY;
  
  console.log(x, y);
});

本記事ではページ全体の座標を取得するevent.pageX(Y)を使用して解説をしていますが、適宜使用しやすいものに変更していただければと思います。

HTMLで要素を作成する

マウスイベントの取得方法がわかりましたので、続いてHTMLで要素を作成していきます。

下記のサンプルではタイトルと背景の要素にそれぞれ独自の「id属性」を持たせています。後ほどご紹介させていただくスクリプトでタイトルと背景の要素を取得する必要があるため、要素が取得しやすいように「id属性」を指定しています。

HTML

<section>
  <h1 id="title">Mousemove!</h1>
  <span id="background"></span>
</section>

HTMLを記述する際のポイントとしては「section」に背景を付けるのではなく、背景用のタグを別に用意する点になります。マウスカーソルの移動を検知した際に「section」を丸ごと動かすわけではなく背景だけを動かすため、別のタグにしておくことをおすすめします。

スタイルを定義する

続いて作成したHTMLにスタイルを定義します。

CSSを定義する際のポイントは下記になります。

親要素に「position: relative」と「overflow: hidden」を指定する
z-indexでテキストや背景の重なり順を指定する
背景となる部分はマウスカーソルで動くため、背景が切れて表示されないように幅と高さを大きめに指定する

下記はデモで使用しているサンプルの一部になります。参考にして好みのスタイルを定義しましょう。

CSS

section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#title {
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 3em;
  font-weight: bolder;
  z-index: 1;
}

#background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  background-image: url(https://into-the-program.com/uploads/3169.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

スクリプトで動きを付ける

最後にスクリプトで動きを付けていきます。

スクリプトの詳細はサンプルにコメントを記載しておりますので、そちらを参考にしていただければと思います。x座標とy座標の計算式は動かしたい値に合わせて適宜調整してご利用ください。

※本記事ではマージンを指定して要素を動かしていますが、positionやtransformでも代替できると思いますので、実装しやすい方法で記述しましょう。

JS

//#titleを取得
let title = document.getElementById('title');
//#backgroundを取得
let background = document.getElementById('background');

document.addEventListener('mousemove', event => {

  //X座標(値は適宜調整)
  var x = Math.round(event.pageX / 100);
  //Y座標(値は適宜調整)
  var y = Math.round(event.pageY / 100);
  
  //#titleのX軸・Y軸を設定
  title.style.marginLeft = -x +'px';
  title.style.marginTop = -y +'px';
  
  //#backgroundのX軸・Y軸を設定
  background.style.marginLeft = x +'px';
  background.style.marginTop = y +'px';
});