🇬🇧 Added origin control to the behaviours.

README.md

@@ -52,20 +52,22 @@ yMotion = 1000 * (10 / 100) * 0.5 = 50 # 50px of positive and negative motion in
 
 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                                                                                                                                 |
-| ------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| `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.                                        |
+| 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.                                                 |
+| `origin-x`          | `number`            | The `x` origin of the mouse input. Defaults to 0.5 (the center). `0` moves the origin to the left edge, `1` to the right edge. **Mouse input only.** |
+| `origin-y`          | `number`            | The `y` origin of the mouse input. Defaults to 0.5 (the center). `0` moves the origin to the top edge, `1` to the bottom edge. **Mouse input only.** |
 
 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": "2.0.0",
+  "version": "2.1.0",
   "license": "MIT",
   "homepage": "http://wagerfield.github.io/parallax/",
   "authors": [

deploy/jquery.parallax.js

@@ -102,15 +102,21 @@
     this.depths = [];
     this.raf = null;
 
-    // Element
+    // Element Bounds
     this.bounds = null;
     this.ex = 0;
     this.ey = 0;
     this.ew = 0;
     this.eh = 0;
+
+    // Element Center
     this.ecx = 0;
     this.ecy = 0;
 
+    // Element Range
+    this.erx = 0;
+    this.ery = 0;
+
     // Calibration
     this.cx = 0;
     this.cy = 0;
@@ -190,6 +196,8 @@
   Plugin.prototype.wh = null;
   Plugin.prototype.wcx = null;
   Plugin.prototype.wcy = null;
+  Plugin.prototype.wrx = null;
+  Plugin.prototype.wry = 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']];
@@ -238,6 +246,8 @@
     this.wh = window.innerHeight;
     this.wcx = this.ww * this.originX;
     this.wcy = this.wh * this.originY;
+    this.wrx = Math.max(this.wcx, this.ww - this.wcx);
+    this.wry = Math.max(this.wcy, this.wh - this.wcy);
   };
 
   Plugin.prototype.updateBounds = function() {
@@ -248,6 +258,8 @@
     this.eh = this.bounds.height;
     this.ecx = this.ew * this.originX;
     this.ecy = this.eh * this.originY;
+    this.erx = Math.max(this.ecx, this.ew - this.ecx);
+    this.ery = Math.max(this.ecy, this.eh - this.ecy);
   };
 
   Plugin.prototype.queueCalibration = function(delay) {
@@ -441,26 +453,30 @@
 
   Plugin.prototype.onMouseMove = function(event) {
 
+    // Cache mouse coordinates.
+    var clientX = event.clientX;
+    var clientY = event.clientY;
+
     // Calculate Mouse Input
     if (!this.orientationSupport && this.relativeInput) {
 
-      // Calculate input relative to the element.
-      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.
+      // Clip mouse coordinates inside 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);
+        clientX = Math.max(clientX, this.ex);
+        clientX = Math.min(clientX, this.ex + this.ew);
+        clientY = Math.max(clientY, this.ey);
+        clientY = Math.min(clientY, this.ey + this.eh);
       }
 
+      // Calculate input relative to the element.
+      this.ix = (clientX - this.ex - this.ecx) / this.erx;
+      this.iy = (clientY - this.ey - this.ecy) / this.ery;
+
     } else {
 
       // Calculate input relative to the window.
-      this.ix = (event.clientX - this.wcx) / this.wcx;
-      this.iy = (event.clientY - this.wcy) / this.wcy;
+      this.ix = (clientX - this.wcx) / this.wrx;
+      this.iy = (clientY - this.wcy) / this.wry;
     }
   };
 

deploy/parallax.js

@@ -99,15 +99,21 @@
     this.depths = [];
     this.raf = null;
 
-    // Element
+    // Element Bounds
     this.bounds = null;
     this.ex = 0;
     this.ey = 0;
     this.ew = 0;
     this.eh = 0;
+
+    // Element Center
     this.ecx = 0;
     this.ecy = 0;
 
+    // Element Range
+    this.erx = 0;
+    this.ery = 0;
+
     // Calibration
     this.cx = 0;
     this.cy = 0;
@@ -223,6 +229,8 @@
   Parallax.prototype.wh = null;
   Parallax.prototype.wcx = null;
   Parallax.prototype.wcy = null;
+  Parallax.prototype.wrx = null;
+  Parallax.prototype.wry = 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']];
@@ -266,6 +274,8 @@
     this.wh = window.innerHeight;
     this.wcx = this.ww * this.originX;
     this.wcy = this.wh * this.originY;
+    this.wrx = Math.max(this.wcx, this.ww - this.wcx);
+    this.wry = Math.max(this.wcy, this.wh - this.wcy);
   };
 
   Parallax.prototype.updateBounds = function() {
@@ -276,6 +286,8 @@
     this.eh = this.bounds.height;
     this.ecx = this.ew * this.originX;
     this.ecy = this.eh * this.originY;
+    this.erx = Math.max(this.ecx, this.ew - this.ecx);
+    this.ery = Math.max(this.ecy, this.eh - this.ecy);
   };
 
   Parallax.prototype.queueCalibration = function(delay) {
@@ -466,26 +478,30 @@
 
   Parallax.prototype.onMouseMove = function(event) {
 
+    // Cache mouse coordinates.
+    var clientX = event.clientX;
+    var clientY = event.clientY;
+
     // Calculate Mouse Input
     if (!this.orientationSupport && this.relativeInput) {
 
-      // Calculate input relative to the element.
-      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.
+      // Clip mouse coordinates inside 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);
+        clientX = Math.max(clientX, this.ex);
+        clientX = Math.min(clientX, this.ex + this.ew);
+        clientY = Math.max(clientY, this.ey);
+        clientY = Math.min(clientY, this.ey + this.eh);
       }
 
+      // Calculate input relative to the element.
+      this.ix = (clientX - this.ex - this.ecx) / this.erx;
+      this.iy = (clientY - this.ey - this.ecy) / this.ery;
+
     } else {
 
       // Calculate input relative to the window.
-      this.ix = (event.clientX - this.wcx) / this.wcx;
-      this.iy = (event.clientY - this.wcy) / this.wcy;
+      this.ix = (clientX - this.wcx) / this.wrx;
+      this.iy = (clientY - this.wcy) / this.wry;
     }
   };