🇬🇧 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

deploy/parallax.js

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+  <meta charset="utf-8">
+
+  <title>Parallax.js | Relative Example</title>
+
+  <!-- Behavioral Meta Data -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+  <!-- Styles -->
+  <link rel="stylesheet" type="text/css" href="styles/styles.css"/>
+
+</head>
+<body>
+
+  <div id="container" class="container">
+    <ul id="scene" class="scene border">
+      <li class="layer" data-depth="1.00"><img src="images/layer1.png"></li>
+      <li class="layer" data-depth="0.80"><img src="images/layer2.png"></li>
+      <li class="layer" data-depth="0.60"><img src="images/layer3.png"></li>
+      <li class="layer" data-depth="0.40"><img src="images/layer4.png"></li>
+      <li class="layer" data-depth="0.20"><img src="images/layer5.png"></li>
+      <li class="layer" data-depth="0.00"><img src="images/layer6.png"></li>
+    </ul>
+    <br>
+    <input type="checkbox" id="relative" checked>
+    <label for="relative">relativeInput</label>
+    <input type="checkbox" id="clip">
+    <label for="clip">clipRelativeInput</label>
+  </div>
+
+  <!-- Scripts -->
+  <script src="../deploy/parallax.js"></script>
+  <script>
+
+  // Elements
+  var scene = document.getElementById('scene');
+  var clipCheckbox = document.getElementById('clip');
+  var relativeCheckbox = document.getElementById('relative');
+
+  // Pretty simple huh?
+  var parallax = new Parallax(scene, {
+    relativeInput: relativeCheckbox.checked,
+    clipRelativeInput: clipCheckbox.checked
+  });
+
+  relativeCheckbox.addEventListener('change', function(event) {
+    parallax.relativeInput = relativeCheckbox.checked;
+  });
+
+  clipCheckbox.addEventListener('change', function(event) {
+    parallax.clipRelativeInput = clipCheckbox.checked;
+  });
+
+  </script>
+
+</body>
+</html>

deploy/parallax.min.js

@@ -1,5 +1,8 @@
 body {
+  font-family: monospace;
+  font-size: 18px;
   background: #111;
+  color: #666;
   margin: 0;
 }
 
@@ -8,10 +11,45 @@ img {
   width: 100%;
 }
 
-.scene {
-  max-width: 500px;
+input[type=checkbox] {
+  display: none;
+}
+
+label {
+  display: inline-block;
+  margin-right: 1em;
+  padding: 0.4em 0;
+  cursor: pointer;
+}
+
+input[type=checkbox] + label:before {
+  display: inline-block;
+  position: relative;
+  background: #444;
+  margin-right: 8px;
+  content: "";
+  height: 16px;
+  width: 16px;
+  top: 1px;
+}
+
+input[type=checkbox]:checked + label:before {
+  background: #00FFAA;
+}
+
+.container {
+  max-width: 600px;
   margin: 0 auto;
+  padding: 5%;
+}
+
+.scene {
   padding: 0;
+  margin: 0;
+}
+
+.border {
+  border: 2px dashed #00FFAA;
 }
 
 .layer:nth-child(1) {

examples/images/layer1.png

@@ -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/",
   "author": "Matthew Wagerfield <[email protected]>",