Create Interactive Parallax Motion Effect Using WebVR API – gyroBackground.js

gyroBackground.js is a pure JavaScript library that applies an iOS-style parallax motion effect to images using WebVR API.

Make sure to visit the demo page on your mobile devices which support WebVR:

How to use it:

Installation:

# Yarn
$ yarn add gyrobackground
# NPM
$ npm install gyrobackground --save

Import the gyroBackground.js library.

<script src="dist/gyroBackground.min.js"></script>

Create a container in which you want to display the parallax images.

<div id="target" class="gyro">
  ...
</div>

Initialize the library on the container element and specify the path to the parallax image.

var background = new GyroBackground('.gyro', 'bg.jpg', {
    // options here
});

You can add more parallax images (layers) to the container.

background.add('bg-2.jpg', {
  // options here
});

Config the parallax motion effect by overring the following parameters:

var background = new GyroBackground('.gyro', 'bg.jpg', {
    // sensitivity
    sensitivity: 0.5,
    // inverts effect
    inverted: false,
    // enables the parallax effect on devices that don't have WebVR support.
    parallax: false,
    // parallax speed
    parallaxSpeed: -2,
    // sensitivity in portrait mode.
    portraitSensitivity: portraitSensitivity,
    // sensitivity in landscape mode.
    landscapeSensitivity: landscapeSensitivity,
    // zoom levels
    zoom: 0,
    portraitZoom: portraitZoom,
    landscapeZoom: landscapeZoom,
    // offset options
    offsetX: 0,
    offsetY: 0,
    portraitOffsetX: portraitOffsetX,
    portraitOffsetY: portraitOffsetY,
    landscapeOffsetX: landscapeOffsetX,
    landscapeOffsetY: landscapeOffsetY,
    // shows a 3D representation of the phone's original position vs current.
    visualize: false,
    // additional class
    className: false
    
});