Gyroscopic Background Images

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.

Installation

npm

npm install --save gyrobackground
# Or yarn add gyrobackground

require('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

Donations

BTC: 14QoRj5Ex5aHCNhJGMoZZ5P9BsLY1a4dfu

XMR: 49pgRecAfychSR9dhd7gQyiaZjQGJyt6B1hVxJdGYYvmRR7VAJurDFSE3qZeui1AFAENKRw8EiB9nc5AYBPSBwrP9uSE9g2

Tino-F/gyroBackground