tilt.min.js

'use strict';var VanillaTilt=function(){class e{constructor(a,b={}){if(!(a instanceof Node))throw"Can't initialize VanillaTilt because "+a+" is not a Node.";this.event=this.updateCall=this.transitionTimeout=this.lastbetazero=this.lastgammazero=this.betazero=this.gammazero=this.top=this.left=this.clientHeight=this.clientWidth=this.height=this.width=null;this.updateBind=this.update.bind(this);this.resetBind=this.reset.bind(this);this.element=a;this.settings=this.extendSettings(b);this.reverse=this.settings.reverse?
-1:1;this.glare=e.isSettingTrue(this.settings.glare);this.glarePrerender=e.isSettingTrue(this.settings["glare-prerender"]);this.fullPageListening=e.isSettingTrue(this.settings["full-page-listening"]);this.gyroscope=e.isSettingTrue(this.settings.gyroscope);this.gyroscopeSamples=this.settings.gyroscopeSamples;this.elementListener=this.getElementListener();this.glare&&this.prepareGlare();this.fullPageListening&&this.updateClientSize();this.addEventListeners();this.reset();this.updateInitialPosition()}static isSettingTrue(a){return""===
a||!0===a||1===a}getElementListener(){if(this.fullPageListening)return window.document;if("string"===typeof this.settings["mouse-event-element"]){const a=document.querySelector(this.settings["mouse-event-element"]);if(a)return a}return this.settings["mouse-event-element"]instanceof Node?this.settings["mouse-event-element"]:this.element}addEventListeners(){this.onMouseEnterBind=this.onMouseEnter.bind(this);this.onMouseMoveBind=this.onMouseMove.bind(this);this.onMouseLeaveBind=this.onMouseLeave.bind(this);
this.onWindowResizeBind=this.onWindowResize.bind(this);this.onDeviceOrientationBind=this.onDeviceOrientation.bind(this);this.elementListener.addEventListener("mouseenter",this.onMouseEnterBind);this.elementListener.addEventListener("mouseleave",this.onMouseLeaveBind);this.elementListener.addEventListener("mousemove",this.onMouseMoveBind);(this.glare||this.fullPageListening)&&window.addEventListener("resize",this.onWindowResizeBind);this.gyroscope&&window.addEventListener("deviceorientation",this.onDeviceOrientationBind)}removeEventListeners(){this.elementListener.removeEventListener("mouseenter",
this.onMouseEnterBind);this.elementListener.removeEventListener("mouseleave",this.onMouseLeaveBind);this.elementListener.removeEventListener("mousemove",this.onMouseMoveBind);this.gyroscope&&window.removeEventListener("deviceorientation",this.onDeviceOrientationBind);(this.glare||this.fullPageListening)&&window.removeEventListener("resize",this.onWindowResizeBind)}destroy(){clearTimeout(this.transitionTimeout);null!==this.updateCall&&cancelAnimationFrame(this.updateCall);this.reset();this.removeEventListeners();
this.element.vanillaTilt=null;delete this.element.vanillaTilt;this.element=null}onDeviceOrientation(a){if(null!==a.gamma&&null!==a.beta){this.updateElementPosition();0<this.gyroscopeSamples&&(this.lastgammazero=this.gammazero,this.lastbetazero=this.betazero,null===this.gammazero?(this.gammazero=a.gamma,this.betazero=a.beta):(this.gammazero=(a.gamma+this.lastgammazero)/2,this.betazero=(a.beta+this.lastbetazero)/2),--this.gyroscopeSamples);var b=(a.gamma-(this.settings.gyroscopeMinAngleX+this.gammazero))/
((this.settings.gyroscopeMaxAngleX-this.settings.gyroscopeMinAngleX)/this.width);a=(a.beta-(this.settings.gyroscopeMinAngleY+this.betazero))/((this.settings.gyroscopeMaxAngleY-this.settings.gyroscopeMinAngleY)/this.height);null!==this.updateCall&&cancelAnimationFrame(this.updateCall);this.event={clientX:b+this.left,clientY:a+this.top};this.updateCall=requestAnimationFrame(this.updateBind)}}onMouseEnter(){this.updateElementPosition();this.element.style.willChange="transform";this.setTransition()}onMouseMove(a){null!==
this.updateCall&&cancelAnimationFrame(this.updateCall);this.event=a;this.updateCall=requestAnimationFrame(this.updateBind)}onMouseLeave(){this.setTransition();this.settings.reset&&requestAnimationFrame(this.resetBind)}reset(){this.event={clientX:this.left+this.width/2,clientY:this.top+this.height/2};this.element&&this.element.style&&(this.element.style.transform=`perspective(${this.settings.perspective}px) `+"rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)");this.resetGlare()}resetGlare(){this.glare&&
(this.glareElement.style.transform="rotate(180deg) translate(-50%, -50%)",this.glareElement.style.opacity="0")}updateInitialPosition(){if(0!==this.settings.startX||0!==this.settings.startY){this.onMouseEnter();this.event=this.fullPageListening?{clientX:(this.settings.startX+this.settings.max)/(2*this.settings.max)*this.clientWidth,clientY:(this.settings.startY+this.settings.max)/(2*this.settings.max)*this.clientHeight}:{clientX:this.left+(this.settings.startX+this.settings.max)/(2*this.settings.max)*
this.width,clientY:this.top+(this.settings.startY+this.settings.max)/(2*this.settings.max)*this.height};var a=this.settings.scale;this.settings.scale=1;this.update();this.settings.scale=a;this.resetGlare()}}getValues(){let a,b;this.fullPageListening?(a=this.event.clientX/this.clientWidth,b=this.event.clientY/this.clientHeight):(a=(this.event.clientX-this.left)/this.width,b=(this.event.clientY-this.top)/this.height);a=Math.min(Math.max(a,0),1);b=Math.min(Math.max(b,0),1);let c=(this.reverse*(this.settings.max-
a*this.settings.max*2)).toFixed(2),d=(this.reverse*(b*this.settings.max*2-this.settings.max)).toFixed(2);return{tiltX:c,tiltY:d,percentageX:100*a,percentageY:100*b,angle:180/Math.PI*Math.atan2(this.event.clientX-(this.left+this.width/2),-(this.event.clientY-(this.top+this.height/2)))}}updateElementPosition(){let a=this.element.getBoundingClientRect();this.width=this.element.offsetWidth;this.height=this.element.offsetHeight;this.left=a.left;this.top=a.top}update(){let a=this.getValues();this.element.style.transform=
"perspective("+this.settings.perspective+"px) rotateX("+("x"===this.settings.axis?0:a.tiltY)+"deg) rotateY("+("y"===this.settings.axis?0:a.tiltX)+"deg) scale3d("+this.settings.scale+", "+this.settings.scale+", "+this.settings.scale+")";this.glare&&(this.glareElement.style.transform=`rotate(${a.angle}deg) translate(-50%, -50%)`,this.glareElement.style.opacity=`${a.percentageY*this.settings["max-glare"]/100}`);this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:a}));this.updateCall=null}prepareGlare(){if(!this.glarePrerender){const a=
document.createElement("div");a.classList.add("js-tilt-glare");const b=document.createElement("div");b.classList.add("js-tilt-glare-inner");a.appendChild(b);this.element.appendChild(a)}this.glareElementWrapper=this.element.querySelector(".js-tilt-glare");this.glareElement=this.element.querySelector(".js-tilt-glare-inner");this.glarePrerender||(Object.assign(this.glareElementWrapper.style,{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",overflow:"hidden","pointer-events":"none","border-radius":"inherit"}),
Object.assign(this.glareElement.style,{position:"absolute",top:"50%",left:"50%","pointer-events":"none","background-image":"linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",transform:"rotate(180deg) translate(-50%, -50%)","transform-origin":"0% 0%",opacity:"0"}),this.updateGlareSize())}updateGlareSize(){if(this.glare){const a=2*(this.element.offsetWidth>this.element.offsetHeight?this.element.offsetWidth:this.element.offsetHeight);Object.assign(this.glareElement.style,{width:`${a}px`,
height:`${a}px`})}}updateClientSize(){this.clientWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;this.clientHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}onWindowResize(){this.updateGlareSize();this.updateClientSize()}setTransition(){clearTimeout(this.transitionTimeout);this.element.style.transition=this.settings.speed+"ms "+this.settings.easing;this.glare&&(this.glareElement.style.transition=`opacity ${this.settings.speed}ms ${this.settings.easing}`);
this.transitionTimeout=setTimeout(()=>{this.element.style.transition="";this.glare&&(this.glareElement.style.transition="")},this.settings.speed)}extendSettings(a){let b={reverse:!1,max:15,startX:0,startY:0,perspective:1E3,easing:"cubic-bezier(.03,.98,.52,.99)",scale:1,speed:300,transition:!0,axis:null,glare:!1,"max-glare":1,"glare-prerender":!1,"full-page-listening":!1,"mouse-event-element":null,reset:!0,gyroscope:!0,gyroscopeMinAngleX:-45,gyroscopeMaxAngleX:45,gyroscopeMinAngleY:-45,gyroscopeMaxAngleY:45,
gyroscopeSamples:10},c={};for(var d in b)if(d in a)c[d]=a[d];else if(this.element.hasAttribute("data-tilt-"+d)){let f=this.element.getAttribute("data-tilt-"+d);try{c[d]=JSON.parse(f)}catch(g){c[d]=f}}else c[d]=b[d];return c}static init(a,b){a instanceof Node&&(a=[a]);a instanceof NodeList&&(a=[].slice.call(a));a instanceof Array&&a.forEach(c=>{"vanillaTilt"in c||(c.vanillaTilt=new e(c,b))})}}"undefined"!==typeof document&&(window.VanillaTilt=e,e.init(document.querySelectorAll("[data-tilt]")));return e}();