Skip to content

Commit de44ae4

Browse files
wagerfieldwagerfield
committed
🇬🇧 Added origin control to the behaviours.
1 parent 6d7f814 commit de44ae4

9 files changed

+132
-66
lines changed

‎README.md

+16-14
Original file line numberDiff line numberDiff line change
@@ -52,20 +52,22 @@ yMotion = 1000 * (10 / 100) * 0.5 = 50 # 50px of positive and negative motion in
5252

5353
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.
5454

55-
| Behaviour | Values | Description |
56-
| ------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
57-
| `relativeInput` | `true` or `false` | Specifies whether or not to use the coordinate system of the `element` passed to the parallax `constructor`. **Mouse input only.** |
58-
| `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.** |
59-
| `calibrate-x` | `true` or `false` | Specifies whether or not to cache & calculate the motion relative to the initial `x` axis value on initialisation. |
60-
| `calibrate-y` | `true` or `false` | Specifies whether or not to cache & calculate the motion relative to the initial `y` axis value on initialisation. |
61-
| `invert-x` | `true` or `false` | `true` moves layers in opposition to the device motion, `false` slides them away. |
62-
| `invert-y` | `true` or `false` | `true` moves layers in opposition to the device motion, `false` slides them away. |
63-
| `limit-x` | `number` or `false` | A numeric value limits the total range of motion in `x`, `false` allows layers to move with complete freedom. |
64-
| `limit-y` | `number` or `false` | A numeric value limits the total range of motion in `y`, `false` allows layers to move with complete freedom. |
65-
| `scalar-x` | `number` | Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion. |
66-
| `scalar-y` | `number` | Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion. |
67-
| `friction-x` | `number` `0 - 1` | The amount of friction the layers experience. This essentially adds some easing to the layer motion. |
68-
| `friction-y` | `number` `0 - 1` | The amount of friction the layers experience. This essentially adds some easing to the layer motion. |
55+
| Behaviour | Values | Description |
56+
| ------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
57+
| `relativeInput` | `true` or `false` | Specifies whether or not to use the coordinate system of the `element` passed to the parallax `constructor`. **Mouse input only.** |
58+
| `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.** |
59+
| `calibrate-x` | `true` or `false` | Specifies whether or not to cache & calculate the motion relative to the initial `x` axis value on initialisation. |
60+
| `calibrate-y` | `true` or `false` | Specifies whether or not to cache & calculate the motion relative to the initial `y` axis value on initialisation. |
61+
| `invert-x` | `true` or `false` | `true` moves layers in opposition to the device motion, `false` slides them away. |
62+
| `invert-y` | `true` or `false` | `true` moves layers in opposition to the device motion, `false` slides them away. |
63+
| `limit-x` | `number` or `false` | A numeric value limits the total range of motion in `x`, `false` allows layers to move with complete freedom. |
64+
| `limit-y` | `number` or `false` | A numeric value limits the total range of motion in `y`, `false` allows layers to move with complete freedom. |
65+
| `scalar-x` | `number` | Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion. |
66+
| `scalar-y` | `number` | Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion. |
67+
| `friction-x` | `number` `0 - 1` | The amount of friction the layers experience. This essentially adds some easing to the layer motion. |
68+
| `friction-y` | `number` `0 - 1` | The amount of friction the layers experience. This essentially adds some easing to the layer motion. |
69+
| `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.** |
70+
| `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.** |
6971

7072
In addition to the behaviours described above, there are **two** methods `enable()` and `disable()` that *activate* and *deactivate* the **Parallax** instance respectively.
7173

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "parallax",
33
"description": "Parallax Engine that reacts to the orientation of a smart device.",
4-
"version": "2.0.0",
4+
"version": "2.1.0",
55
"license": "MIT",
66
"homepage": "http://wagerfield.github.io/parallax/",
77
"authors": [

‎deploy/jquery.parallax.js

+28-12
Original file line numberDiff line numberDiff line change
@@ -102,15 +102,21 @@
102102
this.depths = [];
103103
this.raf = null;
104104

105-
// Element
105+
// Element Bounds
106106
this.bounds = null;
107107
this.ex = 0;
108108
this.ey = 0;
109109
this.ew = 0;
110110
this.eh = 0;
111+
112+
// Element Center
111113
this.ecx = 0;
112114
this.ecy = 0;
113115

116+
// Element Range
117+
this.erx = 0;
118+
this.ery = 0;
119+
114120
// Calibration
115121
this.cx = 0;
116122
this.cy = 0;
@@ -190,6 +196,8 @@
190196
Plugin.prototype.wh = null;
191197
Plugin.prototype.wcx = null;
192198
Plugin.prototype.wcy = null;
199+
Plugin.prototype.wrx = null;
200+
Plugin.prototype.wry = null;
193201
Plugin.prototype.portrait = null;
194202
Plugin.prototype.desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i);
195203
Plugin.prototype.vendors = [null,['-webkit-','webkit'],['-moz-','Moz'],['-o-','O'],['-ms-','ms']];
@@ -238,6 +246,8 @@
238246
this.wh = window.innerHeight;
239247
this.wcx = this.ww * this.originX;
240248
this.wcy = this.wh * this.originY;
249+
this.wrx = Math.max(this.wcx, this.ww - this.wcx);
250+
this.wry = Math.max(this.wcy, this.wh - this.wcy);
241251
};
242252

243253
Plugin.prototype.updateBounds = function() {
@@ -248,6 +258,8 @@
248258
this.eh = this.bounds.height;
249259
this.ecx = this.ew * this.originX;
250260
this.ecy = this.eh * this.originY;
261+
this.erx = Math.max(this.ecx, this.ew - this.ecx);
262+
this.ery = Math.max(this.ecy, this.eh - this.ecy);
251263
};
252264

253265
Plugin.prototype.queueCalibration = function(delay) {
@@ -441,26 +453,30 @@
441453

442454
Plugin.prototype.onMouseMove = function(event) {
443455

456+
// Cache mouse coordinates.
457+
var clientX = event.clientX;
458+
var clientY = event.clientY;
459+
444460
// Calculate Mouse Input
445461
if (!this.orientationSupport && this.relativeInput) {
446462

447-
// Calculate input relative to the element.
448-
this.ix = (event.clientX - this.ex - this.ecx) / this.ecx;
449-
this.iy = (event.clientY - this.ey - this.ecy) / this.ecy;
450-
451-
// Clip input to the element bounds.
463+
// Clip mouse coordinates inside element bounds.
452464
if (this.clipRelativeInput) {
453-
this.ix = Math.max(this.ix,-1);
454-
this.ix = Math.min(this.ix, 1);
455-
this.iy = Math.max(this.iy,-1);
456-
this.iy = Math.min(this.iy, 1);
465+
clientX = Math.max(clientX, this.ex);
466+
clientX = Math.min(clientX, this.ex + this.ew);
467+
clientY = Math.max(clientY, this.ey);
468+
clientY = Math.min(clientY, this.ey + this.eh);
457469
}
458470

471+
// Calculate input relative to the element.
472+
this.ix = (clientX - this.ex - this.ecx) / this.erx;
473+
this.iy = (clientY - this.ey - this.ecy) / this.ery;
474+
459475
} else {
460476

461477
// Calculate input relative to the window.
462-
this.ix = (event.clientX - this.wcx) / this.wcx;
463-
this.iy = (event.clientY - this.wcy) / this.wcy;
478+
this.ix = (clientX - this.wcx) / this.wrx;
479+
this.iy = (clientY - this.wcy) / this.wry;
464480
}
465481
};
466482

‎deploy/jquery.parallax.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎deploy/parallax.js

+28-12
Original file line numberDiff line numberDiff line change
@@ -99,15 +99,21 @@
9999
this.depths = [];
100100
this.raf = null;
101101

102-
// Element
102+
// Element Bounds
103103
this.bounds = null;
104104
this.ex = 0;
105105
this.ey = 0;
106106
this.ew = 0;
107107
this.eh = 0;
108+
109+
// Element Center
108110
this.ecx = 0;
109111
this.ecy = 0;
110112

113+
// Element Range
114+
this.erx = 0;
115+
this.ery = 0;
116+
111117
// Calibration
112118
this.cx = 0;
113119
this.cy = 0;
@@ -223,6 +229,8 @@
223229
Parallax.prototype.wh = null;
224230
Parallax.prototype.wcx = null;
225231
Parallax.prototype.wcy = null;
232+
Parallax.prototype.wrx = null;
233+
Parallax.prototype.wry = null;
226234
Parallax.prototype.portrait = null;
227235
Parallax.prototype.desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i);
228236
Parallax.prototype.vendors = [null,['-webkit-','webkit'],['-moz-','Moz'],['-o-','O'],['-ms-','ms']];
@@ -266,6 +274,8 @@
266274
this.wh = window.innerHeight;
267275
this.wcx = this.ww * this.originX;
268276
this.wcy = this.wh * this.originY;
277+
this.wrx = Math.max(this.wcx, this.ww - this.wcx);
278+
this.wry = Math.max(this.wcy, this.wh - this.wcy);
269279
};
270280

271281
Parallax.prototype.updateBounds = function() {
@@ -276,6 +286,8 @@
276286
this.eh = this.bounds.height;
277287
this.ecx = this.ew * this.originX;
278288
this.ecy = this.eh * this.originY;
289+
this.erx = Math.max(this.ecx, this.ew - this.ecx);
290+
this.ery = Math.max(this.ecy, this.eh - this.ecy);
279291
};
280292

281293
Parallax.prototype.queueCalibration = function(delay) {
@@ -466,26 +478,30 @@
466478

467479
Parallax.prototype.onMouseMove = function(event) {
468480

481+
// Cache mouse coordinates.
482+
var clientX = event.clientX;
483+
var clientY = event.clientY;
484+
469485
// Calculate Mouse Input
470486
if (!this.orientationSupport && this.relativeInput) {
471487

472-
// Calculate input relative to the element.
473-
this.ix = (event.clientX - this.ex - this.ecx) / this.ecx;
474-
this.iy = (event.clientY - this.ey - this.ecy) / this.ecy;
475-
476-
// Clip input to the element bounds.
488+
// Clip mouse coordinates inside element bounds.
477489
if (this.clipRelativeInput) {
478-
this.ix = Math.max(this.ix,-1);
479-
this.ix = Math.min(this.ix, 1);
480-
this.iy = Math.max(this.iy,-1);
481-
this.iy = Math.min(this.iy, 1);
490+
clientX = Math.max(clientX, this.ex);
491+
clientX = Math.min(clientX, this.ex + this.ew);
492+
clientY = Math.max(clientY, this.ey);
493+
clientY = Math.min(clientY, this.ey + this.eh);
482494
}
483495

496+
// Calculate input relative to the element.
497+
this.ix = (clientX - this.ex - this.ecx) / this.erx;
498+
this.iy = (clientY - this.ey - this.ecy) / this.ery;
499+
484500
} else {
485501

486502
// Calculate input relative to the window.
487-
this.ix = (event.clientX - this.wcx) / this.wcx;
488-
this.iy = (event.clientY - this.wcy) / this.wcy;
503+
this.ix = (clientX - this.wcx) / this.wrx;
504+
this.iy = (clientY - this.wcy) / this.wry;
489505
}
490506
};
491507

0 commit comments

Comments
 (0)