Necromancers Playing MTG

    gyrobackground

    0.5.5 • Public • Published

    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!

    license version

    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

    Library Credits

    Install

    npm i gyrobackground

    DownloadsWeekly Downloads

    16

    Version

    0.5.5

    License

    MIT

    Unpacked Size

    11.9 MB

    Total Files

    31

    Last publish

    Collaborators

    • tinof