diff --git a/demo/assets/css/perspectiveRules.css b/demo/assets/css/perspectiveRules.css index d76e7c9..b49c112 100644 --- a/demo/assets/css/perspectiveRules.css +++ b/demo/assets/css/perspectiveRules.css @@ -41,5 +41,5 @@ transform-style: preserve-3d; -webkit-perspective: 1000; backface-visibility: hidden; - perspective: 1000; + perspective: 1000px; } diff --git a/demo/jquery.logosDistort.js b/demo/jquery.logosDistort.js index c0b2b51..f1e4167 100644 --- a/demo/jquery.logosDistort.js +++ b/demo/jquery.logosDistort.js @@ -82,6 +82,7 @@ //bind mouse movement to element if (this.elements[0]) { this._addEvent(window, 'mousemove', function(e) { + _this.patchEvent(e); _this.elements.forEach(function(ele){ var fromX = Math.abs(e.x - ele.distort.center.x); var fromY = Math.abs(e.y - ele.distort.center.y); @@ -95,6 +96,7 @@ } else { this._addEvent(window, 'mousemove', function(e) { + _this.patchEvent(e); var fromX = Math.abs(e.x - _this.elements.distort.center.x); var fromY = Math.abs(e.y - _this.elements.distort.center.y); @@ -110,6 +112,7 @@ //bind mouse movement to element if (this.elements[0]) { this._addEvent(window, 'mousemove', function(e) { + _this.patchEvent(e); _this.elements.forEach(function(ele){ ele.distort.mouseX = e.x; ele.distort.mouseY = e.y; @@ -117,6 +120,7 @@ }); } else { this._addEvent(window, 'mousemove', function(e) { + _this.patchEvent(e); _this.elements.distort.mouseX = e.x; _this.elements.distort.mouseY = e.y; }); @@ -127,6 +131,7 @@ //bind mouse movement to element if (this.elements[0]) { this._addEvent(window, 'mousemove', function(e) { + _this.patchEvent(e); _this.elements.forEach(function(ele){ var fromX = Math.abs(e.x - ele.distort.center.x); var fromY = Math.abs(e.y - ele.distort.center.y); @@ -140,6 +145,7 @@ } else { this._addEvent(window, 'mousemove', function(e) { + _this.patchEvent(e); var fromX = Math.abs(e.x - _this.elements.distort.center.x); var fromY = Math.abs(e.y - _this.elements.distort.center.y); @@ -175,6 +181,16 @@ } }; + logosDistort.prototype.patchEvent = function(event) { + if(!event.x) { + event.x = event.clientX || event.layerX; + } + + if(!event.y) { + event.y = event.clientY || event.layerY; + } + }; + logosDistort.prototype.destroy = function() { this.clearEvents(); this.elements.forEach(function(ele){ @@ -186,6 +202,7 @@ if (window.addEventListener) { element.addEventListener(type, fn, false); } else if (window.attachEvent) { + console.log('wep'); element.attachEvent(type, fn); } diff --git a/dist/jquery.logosDistort.js b/dist/jquery.logosDistort.js index c0b2b51..f1e4167 100644 --- a/dist/jquery.logosDistort.js +++ b/dist/jquery.logosDistort.js @@ -82,6 +82,7 @@ //bind mouse movement to element if (this.elements[0]) { this._addEvent(window, 'mousemove', function(e) { + _this.patchEvent(e); _this.elements.forEach(function(ele){ var fromX = Math.abs(e.x - ele.distort.center.x); var fromY = Math.abs(e.y - ele.distort.center.y); @@ -95,6 +96,7 @@ } else { this._addEvent(window, 'mousemove', function(e) { + _this.patchEvent(e); var fromX = Math.abs(e.x - _this.elements.distort.center.x); var fromY = Math.abs(e.y - _this.elements.distort.center.y); @@ -110,6 +112,7 @@ //bind mouse movement to element if (this.elements[0]) { this._addEvent(window, 'mousemove', function(e) { + _this.patchEvent(e); _this.elements.forEach(function(ele){ ele.distort.mouseX = e.x; ele.distort.mouseY = e.y; @@ -117,6 +120,7 @@ }); } else { this._addEvent(window, 'mousemove', function(e) { + _this.patchEvent(e); _this.elements.distort.mouseX = e.x; _this.elements.distort.mouseY = e.y; }); @@ -127,6 +131,7 @@ //bind mouse movement to element if (this.elements[0]) { this._addEvent(window, 'mousemove', function(e) { + _this.patchEvent(e); _this.elements.forEach(function(ele){ var fromX = Math.abs(e.x - ele.distort.center.x); var fromY = Math.abs(e.y - ele.distort.center.y); @@ -140,6 +145,7 @@ } else { this._addEvent(window, 'mousemove', function(e) { + _this.patchEvent(e); var fromX = Math.abs(e.x - _this.elements.distort.center.x); var fromY = Math.abs(e.y - _this.elements.distort.center.y); @@ -175,6 +181,16 @@ } }; + logosDistort.prototype.patchEvent = function(event) { + if(!event.x) { + event.x = event.clientX || event.layerX; + } + + if(!event.y) { + event.y = event.clientY || event.layerY; + } + }; + logosDistort.prototype.destroy = function() { this.clearEvents(); this.elements.forEach(function(ele){ @@ -186,6 +202,7 @@ if (window.addEventListener) { element.addEventListener(type, fn, false); } else if (window.attachEvent) { + console.log('wep'); element.attachEvent(type, fn); } diff --git a/dist/jquery.logosDistort.min.js b/dist/jquery.logosDistort.min.js index 71c31a4..b86584a 100644 --- a/dist/jquery.logosDistort.min.js +++ b/dist/jquery.logosDistort.min.js @@ -1 +1 @@ -!function(t,e){function i(e,i){if(!e)throw new Error("No element provided.");this.options={enable:!0,effectWeight:1,enableSmoothing:!0,smoothingMultiplier:1,activeOnlyInside:!1,outerBuffer:1.1,elementDepth:140,perspectiveMulti:1,directions:[1,1,1,1,-1,-1,1,1],weights:[31e-6,18e-5,164e-7,19e-7,12e-5],container:t,depthOverride:!1,mouseMode:"container",cssClasses:{smartContainer:"ld-smart-container",overlapContainer:"ld-overlap-container",parent3d:"ld-3d-parent",transformTarget:"ld-transform-target",active:"ld-transform-active",object3d:"ld-3d-object"},beforeInit:function(){},onInit:function(){},onDestroy:function(){},onResize:function(){}},this.options.extend(i),this.elements=e,this.eventCache=[];var s=this;this.elements[0]?(this.elements=[].slice.call(this.elements),this.elements.forEach(function(t){t.distort=new n(t,s.options)})):this.elements.distort=new n(e,s.options),this.addHandlers()}function n(t,e){this._name="logosDistort",this.options=e,this.element=t,this.eventCache=[],"self"===this.options.container?(this.containerOverride=!0,this.options.container=this.element):this.containerOverride=!1,this.container=this.options.container,this.rect=this._getBoundingClientRect(this.container),this.width=this.rect.width,this.height=this.rect.height,this.center=this.getCenterOfContainer(),this.outerCon=null,this.outerConParent=null,this.transformTarget=null,this.objects3d=null,this.mouseX=this.mouseY=0,this.effectX=this.effectY=0,this.has3dSupport=this._has3d(),this.paused=!1,this.options.beforeInit(this),this.init()}i.prototype.addHandlers=function(){function t(){e.elements[0]?e.elements.forEach(function(t){t.distort.detectVisable()}):e.elements.distort.detectVisable()}var e=this;window.addEventListener?(this._addEvent(window,"DOMContentLoaded",t),this._addEvent(window,"load",t),this._addEvent(window,"scroll",t),this._addEvent(window,"resize",t)):window.attachEvent&&(this._addEvent(window,"onDOMContentLoaded",t),this._addEvent(window,"onload",t),this._addEvent(window,"onscroll",t),this._addEvent(window,"onresize",t)),"container"===this.options.mouseMode?this.elements[0]?this._addEvent(window,"mousemove",function(t){e.elements.forEach(function(e){var i=Math.abs(t.x-e.distort.center.x),n=Math.abs(t.y-e.distort.center.y);n4&&!this.options.depthOverride&&(i-=this.objects3d.length/2);var o=i*this.options.elementDepth;if(t.aspect)e=t.aspect;else{var r=this.getAspectRatio(),h=this.getAspectRatio(t);e=isNaN(h[0])||"div"===t.tagName.toLowerCase()?r:h,t.aspect=e}var a=(this.outerConParent.offsetHeight*this.options.outerBuffer).toFixed(2),d=(a*e[0]).toFixed(2);if(d=0&&this.rect.right>=0&&this.rect.top<=window.innerHeight&&this.rect.left<=window.innerWidth},n.prototype._addEvent=function(t,e,i){window.addEventListener?t.addEventListener(e,i,!1):window.attachEvent&&t.attachEvent(e,i),this.eventCache.push({element:t,type:e,fn:i})},n.prototype.clearEvents=function(){this.eventCache.forEach(function(t){window.addEventListener?t.element.removeEventListener(t.type,t.fn,!1):window.attachEvent&&t.element.detachEvent(t.type,t.fn)})},n.prototype.destroy=function(){this.clearEvents(),this.element.parentNode.removeChild(this.element),this.hook("onDestroy"),this.element.removeData&&this.element.removeData("plugin_"+this._name)},n.prototype.hook=function(t){this.options[t]&&this.options[t].call(this.element)},Object.prototype.extend=function(t){for(var e in t)t.hasOwnProperty(e)&&(this[e]=t[e])},t.logosDistort=i,jQuery&&jQuery.fn&&(jQuery.fn.logosDistort=function(t){return this.each(function(){jQuery.data(this,"plugin_logosDistort")||jQuery.data(this,"plugin_logosDistort",new i(this,t))})})}(window,document),function(){for(var t=0,e=["webkit","moz"],i=0;i4&&!this.options.depthOverride&&(i-=this.objects3d.length/2);var s=i*this.options.elementDepth;if(t.aspect)e=t.aspect;else{var r=this.getAspectRatio(),h=this.getAspectRatio(t);e=isNaN(h[0])||"div"===t.tagName.toLowerCase()?r:h,t.aspect=e}var a=(this.outerConParent.offsetHeight*this.options.outerBuffer).toFixed(2),c=(a*e[0]).toFixed(2);if(c=0&&this.rect.right>=0&&this.rect.top<=window.innerHeight&&this.rect.left<=window.innerWidth},n.prototype._addEvent=function(t,e,i){window.addEventListener?t.addEventListener(e,i,!1):window.attachEvent&&t.attachEvent(e,i),this.eventCache.push({element:t,type:e,fn:i})},n.prototype.clearEvents=function(){this.eventCache.forEach(function(t){window.addEventListener?t.element.removeEventListener(t.type,t.fn,!1):window.attachEvent&&t.element.detachEvent(t.type,t.fn)})},n.prototype.destroy=function(){this.clearEvents(),this.element.parentNode.removeChild(this.element),this.hook("onDestroy"),this.element.removeData&&this.element.removeData("plugin_"+this._name)},n.prototype.hook=function(t){this.options[t]&&this.options[t].call(this.element)},Object.prototype.extend=function(t){for(var e in t)t.hasOwnProperty(e)&&(this[e]=t[e])},t.logosDistort=i,jQuery&&jQuery.fn&&(jQuery.fn.logosDistort=function(t){return this.each(function(){jQuery.data(this,"plugin_logosDistort")||jQuery.data(this,"plugin_logosDistort",new i(this,t))})})}(window,document),function(){for(var t=0,e=["webkit","moz"],i=0;i