Added 'devicemotion' handler

package.json

@@ -34,7 +34,7 @@
     "postcss-reporter": "1.3.3",
     "postcss-scss": "0.1.8",
     "qunitjs": "^2.0.1",
-    "require-dir": "0.3.0"
+    "require-dir": "^0.3.2"
   },
   "dependencies": {
     "jquery": "^3.1.1"

src/tilt.jquery.js

@@ -27,6 +27,8 @@
 }(function ($) {
     $.fn.tilt = function (options) {
 
+        const has_touch = 'ontouchstart' in document.documentElement;
+
         /**
          * RequestAnimationFrame
          */
@@ -41,9 +43,24 @@
          */
         const bindEvents = function() {
             const _this = this;
-            $(this).on('mousemove', mouseMove);
-            $(this).on('mouseenter', mouseEnter);
-            if (this.settings.reset) $(this).on('mouseleave', mouseLeave);
+
+            if(has_touch) {
+                // For Mobile
+                // Add support for accelerometeron mobile
+                window.addEventListener('devicemotion', deviceMotionHandler.bind(this), false);
+
+                this.phonePositions = {x: 0.0, y: 0.0};
+
+                this.ticking = false;
+                $(this).css({'will-change': 'transform'});
+                setTransition.call(this);
+            }
+            else {
+                $(this).on('mousemove', mouseMove);
+                $(this).on('mouseenter', mouseEnter);
+                if (this.settings.reset) $(this).on('mouseleave', mouseLeave);
+            }
+
             if (this.settings.glare) $(window).on('resize', updateGlareSize.bind(_this));
         };
 
@@ -94,6 +111,16 @@
             requestTick.call(this);
         };
 
+        const deviceMotionHandler = function(event) {
+            var accX = Math.round(event.accelerationIncludingGravity.x * 10) / 10,
+                accY = Math.round(event.accelerationIncludingGravity.y * 10) / 10,
+                newX = (accX / 10);
+                newY = (accY / 10);
+
+            this.phonePositions = {x: newX, y: newY};
+            requestTick.call(this);
+        }
+
         /**
          * When user mouse leaves tilt element
          */
@@ -116,13 +143,30 @@
             const height = $(this).outerHeight();
             const left = $(this).offset().left;
             const top = $(this).offset().top;
-            const percentageX = (this.mousePositions.x - left) / width;
-            const percentageY = (this.mousePositions.y - top) / height;
-            // x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value
-            const tiltX = ((this.settings.maxTilt / 2) - ((percentageX) * this.settings.maxTilt)).toFixed(2);
-            const tiltY = (((percentageY) * this.settings.maxTilt) - (this.settings.maxTilt / 2)).toFixed(2);
+
+            var percentageX, percentageY;
+            var tiltX, tiltY;
+            var angle;
+
+            var maxTilt;
+
+            if(has_touch) {
+                maxTilt = this.settings.maxTilt * 4.0;
+                percentageX = 1.0 - (this.phonePositions.x + 1) / (2.0);
+                percentageY = (this.phonePositions.y + 1) / (2.0);
+            }
+            else {
+                maxTilt = this.settings.maxTilt;
+                percentageX = (this.mousePositions.x - left) / width;
+                percentageY = (this.mousePositions.y - top) / height;
+            }
+
+            //tilt
+            tiltX = ((maxTilt / 2) - ((percentageX) * maxTilt)).toFixed(2);
+            tiltY = (((percentageY) * maxTilt) - (maxTilt / 2)).toFixed(2);
             // angle
-            const angle = Math.atan2(this.mousePositions.x - (left+width/2),- (this.mousePositions.y - (top+height/2)) )*(180/Math.PI);
+            angle = Math.atan2(0.5 - percentageX, percentageY - 0.5) * (180/Math.PI);
+
             // Return x & y tilt values
             return {tiltX, tiltY, 'percentageX': percentageX * 100, 'percentageY': percentageY * 100, angle};
         };