【parallax.js】マウスやジャイロセンサーの動きに合わせてパララックス効果を実装【iOS13対応方法あり】

<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>

<div id="scene">
    <div class="layer" data-depth="0.00"><img src="img/lay01.jpg" alt=""></div>
    <div class="layer" data-depth="0.30"><img src="img/lay02.png" alt=""></div>
    <div class="layer" data-depth="0.60"><img src="img/lay03.png" alt=""></div>
    <div class="layer" data-depth="0.90"><img src="img/lay04.png" alt=""></div>
</div>

var parallaxGyro = function () {
    var scene = document.getElementById('scene');
    var parallaxInstance = new Parallax(scene, {
        limitX: 10,
        limitY: 5,
    });
}

<div>
    このサイトには"動作と方向"を利用したアニメーションが含まれています。"動作と方向"を利用する場合は、許可ボタンを押してください。
    <button id="request_button">許可する</button>
</div>

//parallax.js
var parallaxGyro = function () {
    var scene = document.getElementById('scene');
    var parallaxInstance = new Parallax(scene, {
        limitX: 10,
        limitY: 5,
    });
}

// ジャイロセンサーの有無確認
var isGyro = false;
if ((window.DeviceOrientationEvent) && ('ontouchstart' in window)) {
    isGyro = true;
}

//PCなど非ジャイロの場合
if (!isGyro) {
    parallaxGyro();
//ジャイロ持ちデバイス
} else {
    //ジャイロ動作確認
    var resGyro = false;
    window.addEventListener("deviceorientation", doGyro, false);

    function doGyro() {
        resGyro = true;
        window.removeEventListener("deviceorientation", doGyro, false);
    }

    setTimeout(function () {
        //ジャイロが動作する場合
        if (resGyro) {
            parallaxGyro();
        //ジャイロが動作しない場合
        } else {
            //iOS13以上ならクリックイベントを要求
            if (typeof DeviceOrientationEvent.requestPermission === "function") {
                //ユーザアクションを得るための要素を表示
                $('#request_button').show();
                $('#request_button').on("click", function () {
                    $('#request_button').hide();
                    DeviceOrientationEvent.requestPermission().then(res => {
                        //「動作と方向」が許可された
                        if (res === "granted") {
                            parallaxGyro();
                            //「動作と方向」が許可されなかった
                        } else {
                            isGyro = false;
                            parallaxGyro();
                        }
                    });
                });
            //iOS13以上ではない場合
            } else {
                isGyro = false;
                parallaxGyro();
            }
        }
    }, 300);
}