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

…rams.
twobit · Mar 21, 2012 · 3a7c29f · 3a7c29f
1 parent acef173
commit 3a7c29f
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -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>

diff --git a/js/parallaxer.js b/js/parallaxer.js
@@ -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);