This is a javascript library that uses the WebVR API to create web backgrounds that move with your phone. I have a vision for it to be the next "parallax" of the web. Feel free to contribute!
Only supported on WebVR compatible devices.
npm install --save gyrobackground
# Or yarn add gyrobackground
require('gyrobackground') // e.g., with Browserify or Webpack.
<script src="https://unpkg.com/[email protected]/dist/gyroBackground.min.js"></script>
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.
>npm run build
//new GyroBackground( containerEl, imageURL, options )
var background = new GyroBackground('#myImage', 'imgs/4.jpg', {
sensitivity: 3,
parallax: true,
parallaxSpeed: -4
});
This method allows you to add multiple images with different settings to the same target element.
Displays a visualization on the Phone relative to it's orientation when GyroBackground was initialized.
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 |
BTC: 14QoRj5Ex5aHCNhJGMoZZ5P9BsLY1a4dfu
XMR: 49pgRecAfychSR9dhd7gQyiaZjQGJyt6B1hVxJdGYYvmRR7VAJurDFSE3qZeui1AFAENKRw8EiB9nc5AYBPSBwrP9uSE9g2