javascriptを使用してマウスの動きに合わせて背景の画像を動かしてみた

こんにちは！
今回はウェブデザインのアクセントとして、どこかで使用できる『マウスの動きに合わせて背景の画像』を動かす方法を
ご紹介します( *´V｀)
引用サイト：https://css-tricks.com/moving-backgrounds-with-mouse-position/

では早速、完成形はこちら！

See the Pen javascriptを使用してマウスの動きに合わせて背景の画像を動かしてみた by sayuri (@giraffeweb) on CodePen.0

それぞれのソースについて

HTMLは簡単なもの、以下で十分です。
IDとクラスは好きに変更できます。

<div class="module" id="module"></div>

cssでは上記のdivに対して背景と幅と高さの設定をしてあげます。
ある程度の背景画像のサイズ指定も一緒にしてあげてください。

.module {
  width: 500px;
  height: 500px;
  margin:auto;
  background-image: url(https://creatornote.nakweb.com/wp-content/themes/giraffe/images/cssfullslide/slide01.jpeg);
  background-size: 1000px;
  background-repeat: no-repeat;
}

javascriptは以下をまるっとコピーしてもらえれば使用できます。
もちろん#moduleの部分を上記のdivで設定したものに変更してくださいね( *´V｀)

const el = document.querySelector("#module");

el.addEventListener("mousemove", (e) => {
  el.style.setProperty('--x', -e.offsetX + "px");
  el.style.setProperty('--y', -e.offsetY + "px");
});

これで実装は完了です～★
どうでしょうか？背景をマウスに合わせて動かせたでしょうか？

引用サイトではcssで動きを制御する
方法もご紹介しているのでみてみてくださいね～！

Share: