1+ var VanillaTilt = function ( ) {
2+ "use strict" ;
3+ class t {
4+ constructor ( e , i = { } ) {
5+ if ( ! ( e instanceof Node ) ) throw "Can't initialize VanillaTilt because " + e + " is not a Node." ;
6+ this . width = null , this . height = null , this . clientWidth = null , this . clientHeight = null , this . left = null , this . top = null , this . gammazero = null , this . betazero = null , this . lastgammazero = null , this . lastbetazero = null , this . transitionTimeout = null , this . updateCall = null , this . event = null , this . updateBind = this . update . bind ( this ) , this . resetBind = this . reset . bind ( this ) , this . element = e , this . settings = this . extendSettings ( i ) , this . reverse = this . settings . reverse ? - 1 : 1 , this . glare = t . isSettingTrue ( this . settings . glare ) , this . glarePrerender = t . isSettingTrue ( this . settings [ "glare-prerender" ] ) , this . fullPageListening = t . isSettingTrue ( this . settings [ "full-page-listening" ] ) , this . gyroscope = t . 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 ( )
7+ }
8+ static isSettingTrue ( t ) {
9+ return "" === t || ! 0 === t || 1 === t
10+ }
11+ getElementListener ( ) {
12+ if ( this . fullPageListening ) return window . document ;
13+ if ( "string" == typeof this . settings [ "mouse-event-element" ] ) {
14+ const t = document . querySelector ( this . settings [ "mouse-event-element" ] ) ;
15+ if ( t ) return t
16+ }
17+ return this . settings [ "mouse-event-element" ] instanceof Node ? this . settings [ "mouse-event-element" ] : this . element
18+ }
19+ addEventListeners ( ) {
20+ 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 )
21+ }
22+ removeEventListeners ( ) {
23+ 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 )
24+ }
25+ destroy ( ) {
26+ clearTimeout ( this . transitionTimeout ) , null !== this . updateCall && cancelAnimationFrame ( this . updateCall ) , this . reset ( ) , this . removeEventListeners ( ) , this . element . vanillaTilt = null , delete this . element . vanillaTilt , this . element = null
27+ }
28+ onDeviceOrientation ( t ) {
29+ if ( null === t . gamma || null === t . beta ) return ;
30+ this . updateElementPosition ( ) , this . gyroscopeSamples > 0 && ( this . lastgammazero = this . gammazero , this . lastbetazero = this . betazero , null === this . gammazero ? ( this . gammazero = t . gamma , this . betazero = t . beta ) : ( this . gammazero = ( t . gamma + this . lastgammazero ) / 2 , this . betazero = ( t . beta + this . lastbetazero ) / 2 ) , this . gyroscopeSamples -= 1 ) ;
31+ const e = this . settings . gyroscopeMaxAngleX - this . settings . gyroscopeMinAngleX ,
32+ i = this . settings . gyroscopeMaxAngleY - this . settings . gyroscopeMinAngleY ,
33+ s = e / this . width ,
34+ n = i / this . height ,
35+ l = ( t . gamma - ( this . settings . gyroscopeMinAngleX + this . gammazero ) ) / s ,
36+ a = ( t . beta - ( this . settings . gyroscopeMinAngleY + this . betazero ) ) / n ;
37+ null !== this . updateCall && cancelAnimationFrame ( this . updateCall ) , this . event = {
38+ clientX : l + this . left ,
39+ clientY : a + this . top
40+ } , this . updateCall = requestAnimationFrame ( this . updateBind )
41+ }
42+ onMouseEnter ( ) {
43+ this . updateElementPosition ( ) , this . element . style . willChange = "transform" , this . setTransition ( )
44+ }
45+ onMouseMove ( t ) {
46+ null !== this . updateCall && cancelAnimationFrame ( this . updateCall ) , this . event = t , this . updateCall = requestAnimationFrame ( this . updateBind )
47+ }
48+ onMouseLeave ( ) {
49+ this . setTransition ( ) , this . settings . reset && requestAnimationFrame ( this . resetBind )
50+ }
51+ reset ( ) {
52+ this . event = {
53+ clientX : this . left + this . width / 2 ,
54+ clientY : this . top + this . height / 2
55+ } , this . element && this . element . style && ( this . element . style . transform = `perspective(${ this . settings . perspective } + "rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)" ) , this . resetGlare ( )
56+ }
57+ resetGlare ( ) {
58+ this . glare && ( this . glareElement . style . transform = "rotate(180deg) translate(-50%, -50%)" , this . glareElement . style . opacity = "0" )
59+ }
60+ updateInitialPosition ( ) {
61+ if ( 0 === this . settings . startX && 0 === this . settings . startY ) return ;
62+ this . onMouseEnter ( ) , this . fullPageListening ? this . event = {
63+ clientX : ( this . settings . startX + this . settings . max ) / ( 2 * this . settings . max ) * this . clientWidth ,
64+ clientY : ( this . settings . startY + this . settings . max ) / ( 2 * this . settings . max ) * this . clientHeight
65+ } : this . event = {
66+ clientX : this . left + ( this . settings . startX + this . settings . max ) / ( 2 * this . settings . max ) * this . width ,
67+ clientY : this . top + ( this . settings . startY + this . settings . max ) / ( 2 * this . settings . max ) * this . height
68+ } ;
69+ let t = this . settings . scale ;
70+ this . settings . scale = 1 , this . update ( ) , this . settings . scale = t , this . resetGlare ( )
71+ }
72+ getValues ( ) {
73+ let t , e ;
74+ return this . fullPageListening ? ( t = this . event . clientX / this . clientWidth , e = this . event . clientY / this . clientHeight ) : ( t = ( this . event . clientX - this . left ) / this . width , e = ( this . event . clientY - this . top ) / this . height ) , t = Math . min ( Math . max ( t , 0 ) , 1 ) , e = Math . min ( Math . max ( e , 0 ) , 1 ) , {
75+ tiltX : ( this . reverse * ( this . settings . max - t * this . settings . max * 2 ) ) . toFixed ( 2 ) ,
76+ tiltY : ( this . reverse * ( e * this . settings . max * 2 - this . settings . max ) ) . toFixed ( 2 ) ,
77+ percentageX : 100 * t ,
78+ percentageY : 100 * e ,
79+ angle : Math . atan2 ( this . event . clientX - ( this . left + this . width / 2 ) , - ( this . event . clientY - ( this . top + this . height / 2 ) ) ) * ( 180 / Math . PI )
80+ }
81+ }
82+ updateElementPosition ( ) {
83+ let t = this . element . getBoundingClientRect ( ) ;
84+ this . width = this . element . offsetWidth , this . height = this . element . offsetHeight , this . left = t . left , this . top = t . top
85+ }
86+ update ( ) {
87+ let t = this . getValues ( ) ;
88+ this . element . style . transform = "perspective(" + this . settings . perspective + "px) rotateX(" + ( "x" === this . settings . axis ? 0 : t . tiltY ) + "deg) rotateY(" + ( "y" === this . settings . axis ? 0 : t . tiltX ) + "deg) scale3d(" + this . settings . scale + ", " + this . settings . scale + ", " + this . settings . scale + ")" , this . glare && ( this . glareElement . style . transform = `rotate(${ t . angle } , this . glareElement . style . opacity = `${ t . percentageY * this . settings [ "max-glare" ] / 100 } ) , this . element . dispatchEvent ( new CustomEvent ( "tiltChange" , {
89+ detail : t
90+ } ) ) , this . updateCall = null
91+ }
92+ prepareGlare ( ) {
93+ if ( ! this . glarePrerender ) {
94+ const t = document . createElement ( "div" ) ;
95+ t . classList . add ( "js-tilt-glare" ) ;
96+ const e = document . createElement ( "div" ) ;
97+ e . classList . add ( "js-tilt-glare-inner" ) , t . appendChild ( e ) , this . element . appendChild ( t )
98+ }
99+ this . glareElementWrapper = this . element . querySelector ( ".js-tilt-glare" ) , this . glareElement = this . element . querySelector ( ".js-tilt-glare-inner" ) , this . glarePrerender || ( Object . assign ( this . glareElementWrapper . style , {
100+ position : "absolute" ,
101+ top : "0" ,
102+ left : "0" ,
103+ width : "100%" ,
104+ height : "100%" ,
105+ overflow : "hidden" ,
106+ "pointer-events" : "none"
107+ } ) , Object . assign ( this . glareElement . style , {
108+ position : "absolute" ,
109+ top : "50%" ,
110+ left : "50%" ,
111+ "pointer-events" : "none" ,
112+ "background-image" : "linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)" ,
113+ transform : "rotate(180deg) translate(-50%, -50%)" ,
114+ "transform-origin" : "0% 0%" ,
115+ opacity : "0"
116+ } ) , this . updateGlareSize ( ) )
117+ }
118+ updateGlareSize ( ) {
119+ if ( this . glare ) {
120+ const t = 2 * ( this . element . offsetWidth > this . element . offsetHeight ? this . element . offsetWidth : this . element . offsetHeight ) ;
121+ Object . assign ( this . glareElement . style , {
122+ width : `${ t } ,
123+ height : `${ t }
124+ } )
125+ }
126+ }
127+ updateClientSize ( ) {
128+ this . clientWidth = window . innerWidth || document . documentElement . clientWidth || document . body . clientWidth , this . clientHeight = window . innerHeight || document . documentElement . clientHeight || document . body . clientHeight
129+ }
130+ onWindowResize ( ) {
131+ this . updateGlareSize ( ) , this . updateClientSize ( )
132+ }
133+ setTransition ( ) {
134+ clearTimeout ( this . transitionTimeout ) , this . element . style . transition = this . settings . speed + "ms " + this . settings . easing , this . glare && ( this . glareElement . style . transition = `opacity ${ this . settings . speed } ${ this . settings . easing } ) , this . transitionTimeout = setTimeout ( ( ) => {
135+ this . element . style . transition = "" , this . glare && ( this . glareElement . style . transition = "" )
136+ } , this . settings . speed )
137+ }
138+ extendSettings ( t ) {
139+ let e = {
140+ reverse : ! 1 ,
141+ max : 15 ,
142+ startX : 0 ,
143+ startY : 0 ,
144+ perspective : 1e3 ,
145+ easing : "cubic-bezier(.03,.98,.52,.99)" ,
146+ scale : 1 ,
147+ speed : 300 ,
148+ transition : ! 0 ,
149+ axis : null ,
150+ glare : ! 1 ,
151+ "max-glare" : 1 ,
152+ "glare-prerender" : ! 1 ,
153+ "full-page-listening" : ! 1 ,
154+ "mouse-event-element" : null ,
155+ reset : ! 0 ,
156+ gyroscope : ! 0 ,
157+ gyroscopeMinAngleX : - 45 ,
158+ gyroscopeMaxAngleX : 45 ,
159+ gyroscopeMinAngleY : - 45 ,
160+ gyroscopeMaxAngleY : 45 ,
161+ gyroscopeSamples : 10
162+ } ,
163+ i = { } ;
164+ for ( var s in e )
165+ if ( s in t ) i [ s ] = t [ s ] ;
166+ else if ( this . element . hasAttribute ( "data-tilt-" + s ) ) {
167+ let t = this . element . getAttribute ( "data-tilt-" + s ) ;
168+ try {
169+ i [ s ] = JSON . parse ( t )
170+ } catch ( e ) {
171+ i [ s ] = t
172+ }
173+ } else i [ s ] = e [ s ] ;
174+ return i
175+ }
176+ static init ( e , i ) {
177+ e instanceof Node && ( e = [ e ] ) , e instanceof NodeList && ( e = [ ] . slice . call ( e ) ) , e instanceof Array && e . forEach ( e => {
178+ "vanillaTilt" in e || ( e . vanillaTilt = new t ( e , i ) )
179+ } )
180+ }
181+ }
182+ return "undefined" != typeof document && ( window . VanillaTilt = t , t . init ( document . querySelectorAll ( "[data-tilt]" ) ) ) , t
183+ } ( ) ;
0 commit comments