0.5.5 • Published 5 years ago
gyrobackground v0.5.5
Installation
npm
npm install --save gyrobackground
# Or yarn add gyrobackgroundrequire('gyrobackground') // e.g., with Browserify or Webpack.builds
<script src="https://unpkg.com/gyrobackground@0.5.5/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 |