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

Category: Animation , Javascript , Recommended | March 13, 2019
Author: Tino-F
Views Total: 105
Official Page: Go to website
Last Update: March 13, 2019
License: MIT

Preview:

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

Description:

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:

gyroBackground.js

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
    
});

You Might Be Interested In:


Leave a Reply