🇬🇧 Added relativeInput and clipRelativeInput functionality. Created relative.html example to demonstrate new features.

Author: wagerfield

README.md

@@ -40,18 +40,20 @@ There are a number of behaviours that you can setup for any given **Parallax**
 instance. These behaviours can either be specified in the markup via data
 attributes or in JavaScript via the constructor and API.
 
-| Behaviour     | Values              | Description                                                                                                        |
-| ------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `calibrate-x` | `true` or `false`   | Specifies whether or not to cache & calculate the motion relative to the initial `x` axis value on initialisation. |
-| `calibrate-y` | `true` or `false`   | Specifies whether or not to cache & calculate the motion relative to the initial `y` axis value on initialisation. |
-| `invert-x`    | `true` or `false`   | `true` moves layers in opposition to the device motion, `false` slides them away.                                  |
-| `invert-y`    | `true` or `false`   | `true` moves layers in opposition to the device motion, `false` slides them away.                                  |
-| `limit-x`     | `number` or `false` | A numeric value limits the total range of motion in `x`, `false` allows layers to move with complete freedom.      |
-| `limit-y`     | `number` or `false` | A numeric value limits the total range of motion in `y`, `false` allows layers to move with complete freedom.      |
-| `scalar-x`    | `number`            | Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion.           |
-| `scalar-y`    | `number`            | Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion.           |
-| `friction-x`  | `number` `0 - 1`    | The amount of friction the layers experience. This essentially adds some easing to the layer motion.               |
-| `friction-y`  | `number` `0 - 1`    | The amount of friction the layers experience. This essentially adds some easing to the layer motion.               |
+| Behaviour           | Values              | Description                                                                                                                                 |
+| ------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `relativeInput`     | `true` or `false`   | Specifies whether or not to use the coordinate system of the `element` passed to the parallax `constructor`. **Mouse input only.**          |
+| `clipRelativeInput` | `true` or `false`   | Specifies whether or not to clip the mouse input to the bounds of the `element` passed to the parallax `constructor`. **Mouse input only.** |
+| `calibrate-x`       | `true` or `false`   | Specifies whether or not to cache & calculate the motion relative to the initial `x` axis value on initialisation.                          |
+| `calibrate-y`       | `true` or `false`   | Specifies whether or not to cache & calculate the motion relative to the initial `y` axis value on initialisation.                          |
+| `invert-x`          | `true` or `false`   | `true` moves layers in opposition to the device motion, `false` slides them away.                                                           |
+| `invert-y`          | `true` or `false`   | `true` moves layers in opposition to the device motion, `false` slides them away.                                                           |
+| `limit-x`           | `number` or `false` | A numeric value limits the total range of motion in `x`, `false` allows layers to move with complete freedom.                               |
+| `limit-y`           | `number` or `false` | A numeric value limits the total range of motion in `y`, `false` allows layers to move with complete freedom.                               |
+| `scalar-x`          | `number`            | Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion.                                    |
+| `scalar-y`          | `number`            | Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion.                                    |
+| `friction-x`        | `number` `0 - 1`    | The amount of friction the layers experience. This essentially adds some easing to the layer motion.                                        |
+| `friction-y`        | `number` `0 - 1`    | The amount of friction the layers experience. This essentially adds some easing to the layer motion.                                        |
 
 In addition to the behaviours described above, there are **two** methods `enable()`
 and `disable()` that *activate* and *deactivate* the **Parallax** instance respectively.

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "parallax",
   "description": "Parallax Engine that reacts to the orientation of a smart device.",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "MIT",
   "homepage": "http://wagerfield.github.io/parallax/",
   "authors": [

deploy/jquery.parallax.js

@@ -45,6 +45,8 @@
   var NAME = 'parallax';
   var MAGIC_NUMBER = 30;
   var DEFAULTS = {
+    relativeInput: false,
+    clipRelativeInput: false,
     calibrationThreshold: 100,
     calibrationDelay: 500,
     supportDelay: 500,
@@ -98,11 +100,14 @@
     this.depths = [];
     this.raf = null;
 
-    // Offset
-    this.ox = 0;
-    this.oy = 0;
-    this.ow = 0;
-    this.oh = 0;
+    // Element
+    this.bounds = null;
+    this.ex = 0;
+    this.ey = 0;
+    this.ew = 0;
+    this.eh = 0;
+    this.ecx = 0;
+    this.ecy = 0;
 
     // Calibration
     this.cx = 0;
@@ -171,8 +176,8 @@
 
   Plugin.prototype.ww = null;
   Plugin.prototype.wh = null;
-  Plugin.prototype.hw = null;
-  Plugin.prototype.hh = null;
+  Plugin.prototype.wcx = null;
+  Plugin.prototype.wcy = null;
   Plugin.prototype.portrait = null;
   Plugin.prototype.desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i);
   Plugin.prototype.vendors = [null,['-webkit-','webkit'],['-moz-','Moz'],['-o-','O'],['-ms-','ms']];
@@ -218,18 +223,10 @@
   };
 
   Plugin.prototype.updateDimensions = function() {
-
-    // Cache Context Dimensions
-    this.ox = this.$context.offset().left;
-    this.oy = this.$context.offset().top;
-    this.ow = this.$context.width();
-    this.oh = this.$context.height();
-
-    // Cache Window Dimensions
     this.ww = window.innerWidth;
     this.wh = window.innerHeight;
-    this.hw = this.ww / 2;
-    this.hh = this.wh / 2;
+    this.wcw = this.ww / 2;
+    this.wcy = this.wh / 2;
   };
 
   Plugin.prototype.queueCalibration = function(delay) {
@@ -417,9 +414,34 @@
 
   Plugin.prototype.onMouseMove = function(event) {
 
-    // Calculate Input
-    this.ix = (event.pageX - this.hw) / this.hw;
-    this.iy = (event.pageY - this.hh) / this.hh;
+    // Calculate Mouse Input
+    if (!this.orientationSupport && this.relativeInput) {
+
+      // Calculate input relative to the element.
+      this.bounds = this.element.getBoundingClientRect();
+      this.ex = this.bounds.left;
+      this.ey = this.bounds.top;
+      this.ew = this.bounds.width;
+      this.eh = this.bounds.height;
+      this.ecx = this.ew / 2;
+      this.ecy = this.eh / 2;
+      this.ix = (event.clientX - this.ex - this.ecx) / this.ecx;
+      this.iy = (event.clientY - this.ey - this.ecy) / this.ecy;
+
+      // Clip input to the element bounds.
+      if (this.clipRelativeInput) {
+        this.ix = Math.max(this.ix,-1);
+        this.ix = Math.min(this.ix, 1);
+        this.iy = Math.max(this.iy,-1);
+        this.iy = Math.min(this.iy, 1);
+      }
+
+    } else {
+
+      // Calculate input relative to the window.
+      this.ix = (event.clientX - this.wcx) / this.wcx;
+      this.iy = (event.clientY - this.wcy) / this.wcy;
+    }
   };
 
   var API = {

deploy/jquery.parallax.min.js

@@ -45,6 +45,8 @@
   var NAME = 'Parallax';
   var MAGIC_NUMBER = 30;
   var DEFAULTS = {
+    relativeInput: false,
+    clipRelativeInput: false,
     calibrationThreshold: 100,
     calibrationDelay: 500,
     supportDelay: 500,
@@ -95,11 +97,14 @@
     this.depths = [];
     this.raf = null;
 
-    // Offset
-    this.ox = 0;
-    this.oy = 0;
-    this.ow = 0;
-    this.oh = 0;
+    // Element
+    this.bounds = null;
+    this.ex = 0;
+    this.ey = 0;
+    this.ew = 0;
+    this.eh = 0;
+    this.ecx = 0;
+    this.ecy = 0;
 
     // Calibration
     this.cx = 0;
@@ -221,8 +226,8 @@
 
   Parallax.prototype.ww = null;
   Parallax.prototype.wh = null;
-  Parallax.prototype.hw = null;
-  Parallax.prototype.hh = null;
+  Parallax.prototype.wcx = null;
+  Parallax.prototype.wcy = null;
   Parallax.prototype.portrait = null;
   Parallax.prototype.desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i);
   Parallax.prototype.vendors = [null,['-webkit-','webkit'],['-moz-','Moz'],['-o-','O'],['-ms-','ms']];
@@ -263,18 +268,10 @@
   };
 
   Parallax.prototype.updateDimensions = function() {
-
-    // Cache Context Dimensions
-    this.ox = this.offset(this.element).left;
-    this.oy = this.offset(this.element).top;
-    this.ow = this.element.offsetWidth;
-    this.oh = this.element.offsetHeight;
-
-    // Cache Window Dimensions
     this.ww = window.innerWidth;
     this.wh = window.innerHeight;
-    this.hw = this.ww / 2;
-    this.hh = this.wh / 2;
+    this.wcx = this.ww / 2;
+    this.wcy = this.wh / 2;
   };
 
   Parallax.prototype.queueCalibration = function(delay) {
@@ -459,9 +456,34 @@
 
   Parallax.prototype.onMouseMove = function(event) {
 
-    // Calculate Input
-    this.ix = (event.pageX - this.hw) / this.hw;
-    this.iy = (event.pageY - this.hh) / this.hh;
+    // Calculate Mouse Input
+    if (!this.orientationSupport && this.relativeInput) {
+
+      // Calculate input relative to the element.
+      this.bounds = this.element.getBoundingClientRect();
+      this.ex = this.bounds.left;
+      this.ey = this.bounds.top;
+      this.ew = this.bounds.width;
+      this.eh = this.bounds.height;
+      this.ecx = this.ew / 2;
+      this.ecy = this.eh / 2;
+      this.ix = (event.clientX - this.ex - this.ecx) / this.ecx;
+      this.iy = (event.clientY - this.ey - this.ecy) / this.ecy;
+
+      // Clip input to the element bounds.
+      if (this.clipRelativeInput) {
+        this.ix = Math.max(this.ix,-1);
+        this.ix = Math.min(this.ix, 1);
+        this.iy = Math.max(this.iy,-1);
+        this.iy = Math.min(this.iy, 1);
+      }
+
+    } else {
+
+      // Calculate input relative to the window.
+      this.ix = (event.clientX - this.wcx) / this.wcx;
+      this.iy = (event.clientY - this.wcy) / this.wcy;
+    }
   };
 
   // Expose Parallax