Create a parallax effect between an array of layers, driving the motion from the gyroscope output of a smartdevice. If no gyroscope is available, the cursor position is used.

We would like to create a single page parallax scrolling effect similar [login to view URL] (La Carte) // Strict Mode 'use strict'; // Constants var NAME = 'parallax'; var MAGIC_NUMBER = 30; var DEFAULTS = { relativeInput: false, clipRelativeInput: false, calibrationThreshold: 100, calibrationDelay: 500, supportDelay: 500, calibrateX: false, calibrateY: true, invertX: true, invertY: true, limitX: false, limitY: false, scalarX: 10.0, scalarY: 10.0, frictionX: 0.1, frictionY: 0.1, originX: 0.5, originY: 0.5 }; function Plugin(element, options) { // DOM Context [login to view URL] = element; // Selections this.$context = $(element).data('api', this); this.$layers = this.$[login to view URL]('.layer'); // Data Extraction var data = { calibrateX: this.$[login to view URL]('calibrate-x') || null, calibrateY: this.$[login to view URL]('calibrate-y') || null, invertX: this.$[login to view URL]('invert-x') || null, invertY: this.$[login to view URL]('invert-y') || null, limitX: parseFloat(this.$[login to view URL]('limit-x')) || null, limitY: parseFloat(this.$[login to view URL]('limit-y')) || null, scalarX: parseFloat(this.$[login to view URL]('scalar-x')) || null, scalarY: parseFloat(this.$[login to view URL]('scalar-y')) || null, frictionX: parseFloat(this.$[login to view URL]('friction-x')) || null, frictionY: parseFloat(this.$[login to view URL]('friction-y')) || null, originX: parseFloat(this.$[login to view URL]('origin-x')) || null, originY: parseFloat(this.$[login to view URL]('origin-y')) || null }; // Delete Null Data Values for (var key in data) { if (data[key] === null) delete data[key]; } // Compose Settings Object $.extend(this, DEFAULTS, options, data); // States [login to view URL] = null; [login to view URL] = true; [login to view URL] = false; [login to view URL] = []; [login to view URL] = null; // Element Bounds [login to view URL] = null; [login to view URL] = 0; [login to view URL] = 0; [login to view URL] = 0; [login to view URL] = 0; // Element Center [login to view URL] = 0; [login to view URL] = 0; // Element Range [login to view URL] = 0; [login to view URL] = 0; // Calibration [login to view URL] = 0; [login to view URL] = 0; // Input [login to view URL] = 0; [login to view URL] = 0; // Motion [login to view URL] = 0; [login to view URL] = 0; // Velocity [login to view URL] = 0; [login to view URL] = 0; // Callbacks [login to view URL] = [login to view URL](this); [login to view URL] = [login to view URL](this); [login to view URL] = [login to view URL](this); [login to view URL] = [login to view URL](this); [login to view URL] = [login to view URL](this); [login to view URL] = [login to view URL](this); // Initialise [login to view URL](); }