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

Category: Animation , Javascript , Recommended | March 13, 2019
Views Total:1,292 views
Official Page:Go to website
Last Update:March 13, 2019


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:


# Yarn
$ yarn add gyrobackground
$ 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">

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

You Might Be Interested In:

One thought on “Create Interactive Parallax Motion Effect Using WebVR API – gyroBackground.js

  1. Frédéric Cordat

    How to add in a website without using yarn or NPM ? i juste need to add the effect on ma page in wordpress ;)


Leave a Reply