Permalink
Browse files

added more options. implemented device motion handler. fixed range pa…

…rams.
  • Loading branch information...
1 parent acef173 commit 3a7c29f54807cc5ab6629688ee4feaa0d424744e @twobit committed Mar 21, 2012
Showing with 74 additions and 14 deletions.
  1. +2 −2 index.html
  2. +72 −12 js/parallaxer.js
View
@@ -29,8 +29,8 @@
<script type="text/javascript" src="js/parallaxer.js"></script>
<script type="text/javascript">
$(document).ready(function() {
- new Parallaxer(document.getElementById('stage1'));
- new Parallaxer(document.getElementById('stage2'), .9, .9);
+ new Parallaxer(document.getElementById('stage1'), {invert: true});
+ new Parallaxer(document.getElementById('stage2'), {xRange: 400, yRange: 400});
});
</script>
</body>
View
@@ -1,25 +1,40 @@
(function(window) {
- function Parallaxer(stage, xRange, yRange) {
+ function Parallaxer(stage, options) {
+ var opts = options || {};
+
this._stage = stage;
this._range = {
- x: xRange || Parallaxer.X_RANGE,
- y: yRange || Parallaxer.Y_RANGE
+ x: opts.xRange || Parallaxer.X_RANGE,
+ y: opts.yRange || Parallaxer.Y_RANGE
};
+ this._inversion = opts.invert ? -1 : 1;
this._transitioning = false;
this._lastCursor = null;
- window.addEventListener('devicemotion', this._onDeviceMove.bind(this), true);
- window.addEventListener('mousemove', this._onMouseMove.bind(this), true);
+ if (window.DeviceMotionEvent) {
+ window.addEventListener('devicemotion', this._onDeviceMotion.bind(this), true);
+ }
+ else {
+ window.addEventListener('mousemove', this._onMouseMove.bind(this), true);
+ }
}
- Parallaxer.X_RANGE = 0.1; // Move at most 1/10 window width in x direction
- Parallaxer.Y_RANGE = 0.2; // Move at most 1/5 window height in y direction
+ Parallaxer.X_RANGE = 50; // Max distance in x direction
+ Parallaxer.Y_RANGE = 100; // Max distance in y direction
+ Parallaxer.SENSITIVITY = 0.01;
Parallaxer.TRANSITION = 'all .01s linear';
Parallaxer.TRANSITION_DIST_SQ = 200 * 200; // Minimum distance before applying a transition effect
Parallaxer.prototype = {
- _onDeviceMove: function(e) {
- console.log('deviceMove');
+ _onDeviceMotion: function(e) {
+ var accel = e.accelerationIncludingGravity;
+ ax = accel.y / 10; // Normalize acceleration
+ ay = accel.x / 10;
+
+ var x = this._inversion * ax * this._range.x,
+ y = this._inversion * ay * this._range.y;
+
+ this._stage.style.WebkitTransform = 'translate3d(' + x + 'px,' + y + 'px, 0)';
},
_transition: function() {
@@ -47,13 +62,58 @@
}
}
- var x = -(e.clientX / window.innerWidth - 0.5) * window.innerWidth * this._range.x,
- y = -(e.clientY / window.innerHeight - 0.5) * window.innerHeight * this._range.y;
+ var x = this._inversion * (2 * e.clientX / window.innerWidth - 1.0) * this._range.x,
+ y = this._inversion * (2 * e.clientY / window.innerHeight - 1.0) * this._range.y;
- this._stage.style.WebkitTransform = 'translate(' + x + 'px,' + y + 'px)';
+ this._stage.style.WebkitTransform = 'translate3d(' + x + 'px,' + y + 'px, 0)';
this._lastCursor = {x: e.clientX, y: e.clientY};
}
};
+ // Taken from ES5-shim https://github.com/kriskowal/es5-shim/blob/master/es5-shim.js
+ // ES-5 15.3.4.5
+ // http://es5.github.com/#x15.3.4.5
+ if (!Function.prototype.bind) {
+ Function.prototype.bind = function bind(that) {
+
+ var target = this;
+
+ if (typeof target != "function") {
+ throw new TypeError();
+ }
+
+ var args = Array.prototype.slice.call(arguments, 1),
+ bound = function () {
+
+ if (this instanceof bound) {
+
+ var F = function(){};
+ F.prototype = target.prototype;
+ var self = new F();
+
+ var result = target.apply(
+ self,
+ args.concat(Array.prototype.slice.call(arguments))
+ );
+ if (Object(result) === result) {
+ return result;
+ }
+ return self;
+
+ } else {
+
+ return target.apply(
+ that,
+ args.concat(Array.prototype.slice.call(arguments))
+ );
+
+ }
+
+ };
+
+ return bound;
+ };
+ }
+
window.Parallaxer = Parallaxer;
})(window);

0 comments on commit 3a7c29f

Please sign in to comment.