diff --git a/README.md b/README.md
index bf20a1a..628a4ca 100644
--- a/README.md
+++ b/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)
\ No newline at end of file
+- Tutorial (Coming Soon)
diff --git a/jquery.interactive_bg.js b/jquery.interactive_bg.js
index af43485..3ba2f69 100644
--- a/jquery.interactive_bg.js
+++ b/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("")
} else {
el.wrapInner("")
}
-
-
-
+
+
+
// 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);
\ No newline at end of file
+
+}(window.jQuery);
diff --git a/jquery.interactive_bg.min.js b/jquery.interactive_bg.min.js
index d66610e..6e1f35c 100644
--- a/jquery.interactive_bg.min.js
+++ b/jquery.interactive_bg.min.js
@@ -1 +1 @@
-!function(e){var t={strength:25,scale:1.05,animationSpeed:"100ms",contain:true,wrapContent:false};e.fn.interactive_bg=function(n){return this.each(function(){var r=e.extend({},t,n),i=e(this),s=i.outerHeight(),o=i.outerWidth(),u=r.strength/s,a=r.strength/o,f="ontouchstart"in document.documentElement;if(r.contain==true){i.css({overflow:"hidden"})}if(r.wrapContent==false){i.prepend("")}else{i.wrapInner("")}if(i.data("ibg-bg")!==undefined){i.find("> .ibg-bg").css({background:"url('"+i.data("ibg-bg")+"') no-repeat center center","background-size":"cover"})}i.find("> .ibg-bg").css({width:o,height:s});if(f||screen.width<=699){window.addEventListener("devicemotion",l,false);function l(e){var t=Math.round(event.accelerationIncludingGravity.x*10)/10,n=Math.round(event.accelerationIncludingGravity.y*10)/10,s=-(t/10)*r.strength,o=-(n/10)*r.strength,u=-(s*2),a=-(o*2);i.find("> .ibg-bg").css({"-webkit-transform":"matrix("+r.scale+",0,0,"+r.scale+","+u+","+a+")","-moz-transform":"matrix("+r.scale+",0,0,"+r.scale+","+u+","+a+")","-o-transform":"matrix("+r.scale+",0,0,"+r.scale+","+u+","+a+")",transform:"matrix("+r.scale+",0,0,"+r.scale+","+u+","+a+")"})}}else{i.mouseenter(function(e){if(r.scale!=1)i.addClass("ibg-entering");i.find("> .ibg-bg").css({"-webkit-transform":"matrix("+r.scale+",0,0,"+r.scale+",0,0)","-moz-transform":"matrix("+r.scale+",0,0,"+r.scale+",0,0)","-o-transform":"matrix("+r.scale+",0,0,"+r.scale+",0,0)",transform:"matrix("+r.scale+",0,0,"+r.scale+",0,0)","-webkit-transition":"-webkit-transform "+r.animationSpeed+" linear","-moz-transition":"-moz-transform "+r.animationSpeed+" linear","-o-transition":"-o-transform "+r.animationSpeed+" linear",transition:"transform "+r.animationSpeed+" linear"}).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){i.removeClass("ibg-entering")})}).mousemove(function(e){if(!i.hasClass("ibg-entering")&&!i.hasClass("exiting")){var t=e.pageX||e.clientX,n=e.pageY||e.clientY,t=t-i.offset().left-o/2,n=n-i.offset().top-s/2,f=a*t*-1,l=u*n*-1;i.find("> .ibg-bg").css({"-webkit-transform":"matrix("+r.scale+",0,0,"+r.scale+","+f+","+l+")","-moz-transform":"matrix("+r.scale+",0,0,"+r.scale+","+f+","+l+")","-o-transform":"matrix("+r.scale+",0,0,"+r.scale+","+f+","+l+")",transform:"matrix("+r.scale+",0,0,"+r.scale+","+f+","+l+")","-webkit-transition":"none","-moz-transition":"none","-o-transition":"none",transition:"none"})}}).mouseleave(function(e){if(r.scale!=1)i.addClass("ibg-exiting");i.addClass("ibg-exiting").find("> .ibg-bg").css({"-webkit-transform":"matrix(1,0,0,1,0,0)","-moz-transform":"matrix(1,0,0,1,0,0)","-o-transform":"matrix(1,0,0,1,0,0)",transform:"matrix(1,0,0,1,0,0)","-webkit-transition":"-webkit-transform "+r.animationSpeed+" linear","-moz-transition":"-moz-transform "+r.animationSpeed+" linear","-o-transition":"-o-transform "+r.animationSpeed+" linear",transition:"transform "+r.animationSpeed+" linear"}).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){i.removeClass("ibg-exiting")})})}})}}(window.jQuery)
\ No newline at end of file
+!function($){var defaults={strength:25,scale:1.05,animationSpeed:"100ms",contain:true,wrapContent:false,mobile:true};$.fn.interactive_bg=function(options){return this.each(function(){var settings=$.extend({},defaults,options),el=$(this),h=el.outerHeight(),w=el.outerWidth(),sh=settings.strength/h,sw=settings.strength/w,has_touch="ontouchstart"in document.documentElement;if(settings.contain==true){el.css({overflow:"hidden"})}if(settings.wrapContent==false){el.prepend("")}else{el.wrapInner("")}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){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+")"})}}}else{el.mouseenter(function(e){if(settings.scale!=1)el.addClass("ibg-entering");el.find("> .ibg-bg").css({"-webkit-transform":"matrix("+settings.scale+",0,0,"+settings.scale+",0,0)","-moz-transform":"matrix("+settings.scale+",0,0,"+settings.scale+",0,0)","-o-transform":"matrix("+settings.scale+",0,0,"+settings.scale+",0,0)",transform:"matrix("+settings.scale+",0,0,"+settings.scale+",0,0)","-webkit-transition":"-webkit-transform "+settings.animationSpeed+" linear","-moz-transition":"-moz-transform "+settings.animationSpeed+" linear","-o-transition":"-o-transform "+settings.animationSpeed+" linear",transition:"transform "+settings.animationSpeed+" linear"}).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){el.removeClass("ibg-entering")})}).mousemove(function(e){if(!el.hasClass("ibg-entering")&&!el.hasClass("exiting")){var pageX=e.pageX||e.clientX,pageY=e.pageY||e.clientY,pageX=pageX-el.offset().left-w/2,pageY=pageY-el.offset().top-h/2,newX=sw*pageX*-1,newY=sh*pageY*-1;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+")","-webkit-transition":"none","-moz-transition":"none","-o-transition":"none",transition:"none"})}}).mouseleave(function(e){if(settings.scale!=1)el.addClass("ibg-exiting");el.addClass("ibg-exiting").find("> .ibg-bg").css({"-webkit-transform":"matrix(1,0,0,1,0,0)","-moz-transform":"matrix(1,0,0,1,0,0)","-o-transform":"matrix(1,0,0,1,0,0)",transform:"matrix(1,0,0,1,0,0)","-webkit-transition":"-webkit-transform "+settings.animationSpeed+" linear","-moz-transition":"-moz-transform "+settings.animationSpeed+" linear","-o-transition":"-o-transform "+settings.animationSpeed+" linear",transition:"transform "+settings.animationSpeed+" linear"}).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){el.removeClass("ibg-exiting")})})}})}}(window.jQuery);
\ No newline at end of file