Implementing a Mobile Parallax Effect Using the DeviceOrientationEvent Gyroscope API

Background

The author was inspired by a Juejin article showcasing a parallax effect on PC and wanted to bring a similar experience to mobile devices, avoiding unnecessary visual flair while improving user interaction.

Pre‑research

Initial attempts to use a div for debugging revealed that mobile browsers lack a mouse, requiring a shift from mouse‑move events to touch or sensor‑based inputs.

Gyroscope Introduction

Mobile devices provide a three‑axis gyroscope that reports rotation rates around the X, Y, and Z axes as alpha , beta , and gamma . The article details the meaning and typical ranges of each axis and notes differing initial values between Android and iOS.

Implementation Steps

Create a container with a background-image for the backdrop.

Add a character image inside the container and give it a floating effect.

Listen for device orientation events to obtain sensor data.

Use the sensor values to modify transform (tilt) and backgroundPosition (pan) CSS properties.

Apply different tilt/pan intensities to the background and character to achieve a depth‑perception parallax effect.

The author encapsulated the logic in a Gyroscope class and a smoothing class, updating state on each sensor change and re‑rendering the CSS accordingly.

Problems Encountered

1. Gyroscope data unavailable

Modern browsers restrict access to motion sensors to secure contexts (HTTPS). The solution is to expose the local development server via an HTTPS tunnel such as ngrok .

2. iOS 13+ permission requirement

iOS 13 and later require explicit user permission before providing gyroscope data. The article provides a JavaScript snippet that requests permission and, upon approval, registers a deviceorientation listener.

function testSupportGyro() {
  return new Promise(() => {
    if (typeof DeviceOrientationEvent !== "undefined" && typeof DeviceOrientationEvent.requestPermission === "function") {
      // iOS 13+ needs permission
      DeviceOrientationEvent.requestPermission()
        .then(permissionState => {
          if (permissionState === "granted") {
            window.addEventListener("deviceorientation", handleOrientationEvent);
          } else {
            console.error("Device does not support gyroscope access");
          }
        })
        .catch(error => {
          console.error(error);
        });
    } else {
      // Android does not need permission
      window.addEventListener("deviceorientation", handleOrientationEvent);
    }
  });
}

Final Result

The completed demo demonstrates a smooth, sensor‑driven parallax animation that works on both Android and iOS devices when served over HTTPS and with proper permission handling. The source code is available at GitHub .