スマホの傾きを検知して画像を動かすデモ

GWに何か面白いものを作れないかと思って、スマホの傾き角度によって画像を動かすデモを作成しました。用途は限られてきそうですが、ティザーサイトやLPなどの表現で使えるかも。
実装はHTML、SCSS、TypeScript。ビルドツールはvite。ちなみに画像(svg)の作成はAffinity Designerです。

作成したもの

Github
https://github.com/neru-ne/katamuki_demo
デモページ
https://neru-ne.github.io/katamuki_demo/
※傾きを検知できるデバイスでないと、画像の動きを確認できません

↑実際の動き

Github Pagesにアクセスし、スマホを傾けると画像が傾きに連動して動きます。

スマホの傾きを検知する

傾きはJavaScripの場合、deviceorientationのイベントで取得します。

// 加速度センサーイベント処理
window.addEventListener("deviceorientation", function (e) {
  // alpha, beta, gammaの値を取得
  let alpha = e.alpha;
  let beta = e.beta;
  let gamma = e.gamma;

  //傾き
  const movePosition = new MovePosition(alpha, beta, gamma);
  movePosition.setImgPositon();

}, false);

値について

イベントからは、alpha,beta,bammaの値を取ることができます。

alpha	方位磁石のような感じ。スマホの上端が地球の北極を向いている時が0度。
beta	スマホを縦に回転した時に変化する値
gamma	スマホを横に回転した時に変化する値

なので、スマホを横に回転した時はgammaを参照し、縦に回転させた時はbetaを参照すればよさそうです。

方向および動きとして示されるデータ – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained

スマホの傾きによって画像を動かす

処理はMDNのものを参考にして作成しました。

端末の方向の検出 – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Device_orientation_events/Detecting_device_orientation

画像によって動く範囲を調整し、若干遅延させる

layer_7が一番手前の鹿の画像です。一番手前はよく動き、画像重なり順が後ろになっていくにつれ、動きを鈍化&少し遅延させます。
動きの部分は単純にstyleのtransform:translateを上書きしているだけ。

    const myPromise = new Promise(resolve => {
      MovePosition.layer_7.style.transform = `translate(${x}px, ${y /2}px)`;
      resolve("done");
    });

    myPromise
      .then(()=>{
        setTimeout(() => {
          MovePosition.layer_6.style.transform = `translate(${x / 2}px, ${y / 3}px)`;
        }, 200);
      }).then(() => {
        setTimeout(() => {
          MovePosition.layer_5.style.transform = `translate(${x / 4}px, ${y / 4}px)`;
        }, 300);
      }).then(() => {
        setTimeout(() => {
          MovePosition.layer_4.style.transform = `translate(${x / 6}px, ${y / 6}px)`;
        }, 400);
      }).then(() => {
        setTimeout(() => {
          MovePosition.layer_3.style.transform = `translate(${x / 8}px, ${y / 8}px)`;
        }, 500);
      }).then(() => {
        setTimeout(() => {
          MovePosition.layer_2.style.transform = `translate(${x / 9}px, ${y / 9}px)`;
        }, 500);
      })