This library is just a port of the awesome parallax.js library for Fibit OS.

• 1. Getting started
  • 1.1 Installation
  • 1.2 Preparations
  • 1.3 Run Parallax
• 2. Configuration
  • 2.1 Programmatic
  • 2.2 Configuration Options
• 3. Methods
• 6. Information
  • 6.1 License
  • 6.2 Contributors

npm i -s fitbit-parallax

You will then find the source code in node_modules/fitbit-parallax/parallax.js

import { Parallax } from 'fitbit-parallax'

Each Parallax.js instance needs a container element, the scene. You're free to identify it by any means you want, but for now, let's use an ID:

<svg id="scene" width="300" height="300">
</svg>

Per default, all direct child elements of the scene will become moving objects, the layers.

<svg id="scene" width="300" height="300">
  <g>My first Layer!</g>
  <g>My second Layer!</g>
</svg>

While all other options and parameters are optional, with sane defaults, and can be set programatically, each layer needs a layer attribute (between 0 and 100). The movement applied to each layer will be multiplied by its layer attribute.

<svg id="scene" width="300" height="300">
  <g layer="20">My first Layer!</g>
  <g layer="60">My second Layer!</g>
</svg>

As soon as your app is loaded, you can create a new Parallax.js instance, providing your scene element as first parameter.

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);
parallaxInstance.enable()

That's it, you're running Parallax.js now!

Most configuration settings can be declared as property of the configuration object. Some options can also be set at run-time via instance methods.

Programmatic:

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene, {
  calibrationDelay: 1000
});
parallaxInstance.enable()

Using Methods at Runtime:

parallaxInstance.friction(0.2, 0.2);

Property: calibrateX & calibrateY
Method: calibrate(x, y)

Value: boolean
Default: false for X, true for Y

Caches the initial X/Y axis value on initialization and calculates motion relative to this.

Property: invertX & invertY
Method: invert(x, y)

Value: boolean
Default: true

Inverts the movement of the layers relative to the input. Setting both of these values to false will cause the layers to move with the device motion.

Property: limitX & limitY
Method: limit(x, y)

Value: false or integer
Default: false

Limits the movement of layers on the respective axis. Leaving this value at false gives complete freedom to the movement.

Property: scalarX & scalarY
Method: scalar(x, y)

Value: float
Default: 10.0

Multiplies the input motion by this value, increasing or decreasing the movement speed and range.

Property: frictionX & frictionY
Method: friction(x, y)

Value: float between 0 and 1
Default: 0.1

Amount of friction applied to the layers. At 1 the layers will instantly go to their new positions, everything below 1 adds some easing.
The default value of 0.1 adds some sensible easing. Try 0.15 or 0.075 for some difference.

In addition to the configuration methods outlined in the section above, there are a few more publicly accessible methods:

Enables a disabled Parallax instance.

Disables a running Parallax instance.

Completely destroys a Parallax instance, allowing it to be garbage collected.

This project is licensed under the terms of the MIT License. Enjoy!

Matthew Wagerfield: @wagerfield
René Roth: Website
Grégoire Sage : Modification for Fitbit OS