New option for mobile accelerometer

README.md

@@ -38,7 +38,8 @@ Now call the function as follows and your background will magically reacts to vi
    scale: 1.05,               // The scale in which the background will be zoomed when hovering. Change this to 1 to stop scaling. The default value is 1.05.
    animationSpeed: "100ms",   // The time it takes for the scale to animate. This accepts CSS3 time function such as "100ms", "2.5s", etc. The default value is "100ms".
    contain: true,             // This option will prevent the scaled object/background from spilling out of its container. Keep this true for interactive background. Set it to false if you want to make an interactive object instead of a background. The default value is true.
-   wrapContent: false         // This option let you choose whether you want everything inside to reacts to your cursor, or just the background. Toggle it to true to have every elements inside reacts the same way. The default value is false
+   wrapContent: false,        // This option let you choose whether you want everything inside to reacts to your cursor, or just the background. Toggle it to true to have every elements inside reacts the same way. The default value is false
+   mobile: true               // This option uses to open mobile accelerometer or not, The default is true.
  });
 ````
 
@@ -72,4 +73,4 @@ Now your background will have this interactive parallax effect like no other sit
 If you want to see more of my plugins, visit [The Pete Design](http://www.thepetedesign.com/#design), or follow me on [Twitter](http://www.twitter.com/peachananr) and [Github](http://www.github.com/peachananr).
 
 ## Other Resources
-- Tutorial (Coming Soon)
+- Tutorial (Coming Soon)

jquery.interactive_bg.js

@@ -8,21 +8,22 @@
  * that reacts to viewer's cursor
  *
  * https://github.com/peachananr/interactive_bg
- * 
+ *
  * License: GPL v3
  *
  * ========================================================== */
 
 !function($){
-  
+
   var defaults = {
     strength: 25,
     scale: 1.05,
     animationSpeed: "100ms",
     contain: true,
-    wrapContent: false
-  };  
-
+    wrapContent: false,
+    mobile: true
+  };
+
   $.fn.interactive_bg = function(options){
     return this.each(function(){
       var settings = $.extend({}, defaults, options),
@@ -32,62 +33,61 @@
           sh = settings.strength / h,
           sw = settings.strength / w,
           has_touch = 'ontouchstart' in document.documentElement;
-          
+
       if (settings.contain == true) {
         el.css({
           overflow: "hidden"
         });
       }
       // Insert new container so that the background can be contained when scaled.
-      
+
       if (settings.wrapContent == false) {
         el.prepend("<div class='ibg-bg'></div>")
       } else {
         el.wrapInner("<div class='ibg-bg'></div>")
       }
-      
-      
-      
+
+
+
       // Set background to the newly added container.
-      
+
       if (el.data("ibg-bg") !== undefined) {
         el.find("> .ibg-bg").css({
           background: "url('" + el.data("ibg-bg") + "') no-repeat center center",
           "background-size": "cover",
         });
       }
-      
+
       el.find("> .ibg-bg").css({
         width: w,
         height: h
       })
-
-
-
+
       if(has_touch || screen.width <= 699) {
         // For Mobile
         // Add support for accelerometeron mobile
-        window.addEventListener('devicemotion', deviceMotionHandler, false);
+        if (settings.mobile) {
+          window.addEventListener('devicemotion', deviceMotionHandler, false);
 
           function deviceMotionHandler(eventData) {
-             var accX = Math.round(event.accelerationIncludingGravity.x*10) / 10,
-                 accY = Math.round(event.accelerationIncludingGravity.y*10) / 10,
-                 xA = -(accX / 10) * settings.strength,
-                 yA = -(accY / 10) * settings.strength,
-                 newX = -(xA*2),
-                 newY = -(yA*2);
-                 
-                 el.find("> .ibg-bg").css({
-                   "-webkit-transform": "matrix(" + settings.scale + ",0,0," + settings.scale + "," + newX + "," + newY + ")",
-                   "-moz-transform": "matrix(" + settings.scale + ",0,0," + settings.scale + "," + newX + "," + newY + ")",
-                   "-o-transform": "matrix(" + settings.scale + ",0,0," + settings.scale + "," + newX + "," + newY + ")",
-                   "transform": "matrix(" + settings.scale + ",0,0," + settings.scale + "," + newX + "," + newY + ")"
-                 });    
+            var accX = Math.round(event.accelerationIncludingGravity.x*10) / 10,
+                accY = Math.round(event.accelerationIncludingGravity.y*10) / 10,
+                xA = -(accX / 10) * settings.strength,
+                yA = -(accY / 10) * settings.strength,
+                newX = -(xA*2),
+                newY = -(yA*2);
+
+            el.find("> .ibg-bg").css({
+              "-webkit-transform": "matrix(" + settings.scale + ",0,0," + settings.scale + "," + newX + "," + newY + ")",
+              "-moz-transform": "matrix(" + settings.scale + ",0,0," + settings.scale + "," + newX + "," + newY + ")",
+              "-o-transform": "matrix(" + settings.scale + ",0,0," + settings.scale + "," + newX + "," + newY + ")",
+              "transform": "matrix(" + settings.scale + ",0,0," + settings.scale + "," + newX + "," + newY + ")"
+            });
 
           }
-
+        }
       } else {
-        // For Desktop 
+        // For Desktop
         // Animate only scaling when mouse enter
         el.mouseenter(function(e) {
           if (settings.scale != 1) el.addClass("ibg-entering")
@@ -145,8 +145,7 @@
         });
       }
     });
-    
+
   }
-
-
-}(window.jQuery);
+
+}(window.jQuery);