Installation

npm

npm install --save gyrobackground
# Or yarn add gyrobackground

require('gyrobackground')  // e.g., with Browserify or Webpack.

builds

<script src="https://unpkg.com/[email protected]/dist/gyroBackground.min.js"></script>

Local Development

git clone https://github.com/Tino-F/gyroBackground.git  # Clone the repository.
cd gyroBackground && npm install  # Install dependencies.
npm start  # Start the local development server.

Generating builds

>npm run build

Usage

//new GyroBackground( containerEl, imageURL, options )

var background = new GyroBackground('#myImage', 'imgs/4.jpg', {
  sensitivity: 3,
  parallax: true,
  parallaxSpeed: -4
});

Methods

.add( imageURL, config )

This method allows you to add multiple images with different settings to the same target element.

.visualize()

Displays a visualization on the Phone relative to it's orientation when GyroBackground was initialized.

Config options

| Option | Type | Default Value | Description | | -- | -- | -- | -- | | parallax | Boolean | false | Enable parallax on devices that don't have WebVR support. | | parallaxSpeed | Float | -2 | How slow/fast the image moves while scrolling | | sensitivity | Float | 0.5 | The "image's" responsiveness to movement. | | landscapeSensitivity | Float | sensitivity | The "image's" responsiveness to movement when the device is in landscape mode. | | portraitSensitivity | Float | sensitivity | The "image's" responsiveness to movement when the device is in portrait mode. | | zoom | int | 0 | This value is added to the camera's z-distance from the image. | | landscapeZoom | int | 0 | This value is added to the camera's z-distance when the device is in landscape mode. | | portraitZoom | int | 0 | This value is added to the camera's z-distance when the device is in portrait mode. | | offsetX | int | 0 | The image's offset from the auto-calculated X position. | | portraitOffsetX | int | offsetX | The image's offset from the auto-calculated X position when the device is in portrait mode. | | landscapeOffsetX | int | offsetX | The image's offset from the auto-calculated X position when the device is in landscape mode. | | offsetY | int | 0 | The image's offset from the auto-calculated Y position. | | portraitOffsetY | int | offsetY | The image's offset from the auto-calculated Y position when the device is in portrait mode. | | landscapeOffsetY | int | offsetY | The image's offset from the auto-calculated Y position when the device is in landscape mode. | | inverted | Boolean | false | Reverse movement on the X & Y axis. | | visualize | Boolean | false | Show a 3D representation of the phone's original position vs current. | | className | String | null | add a css class to identify the parallax containers |

Library Credits

• Three.JS
• Rellax
• webvr-polyfill