1(function ($) { 2 3 'use strict'; 4 5 $.fn.mkParallax = function () { 6 return this.each( function() { 7 var $this = $(this), 8 textShrinkClass = 'mk-plx-textShrink', 9 textStretchClass = 'mk-plx-textStretch', 10 fadeInClass = 'mk-plx-fadeIn', 11 fadeOutClass = 'mk-plx-fadeOut', 12 zoomInClass = 'mk-plx-zoomIn', 13 zoomOutClass = 'mk-plx-zoomOut', 14 rotateXClass = 'mk-plx-rotateX', 15 rotateYClass = 'mk-plx-rotateY', 16 rotateZClass = 'mk-plx-rotateZ', 17 moveTopClass = 'mk-plx-moveTop', 18 moveBottomClass = 'mk-plx-moveBottom', 19 moveLeftClass = 'mk-plx-moveLeft', 20 moveRightClass = 'mk-plx-moveRight', 21 22 ltrSpacing = parseFloat( $this.css( 'letterSpacing' ).replace(/px|em|rem/, '') ), 23 defaultLtrSpacing = 30, 24 shrinkSize = ltrSpacing ? ltrSpacing : defaultLtrSpacing, 25 curShrinkSize = shrinkSize, 26 stretchSize = ltrSpacing ? ltrSpacing : 0, 27 curStretchSize = 30, 28 29 opacity = parseFloat( $this.css( 'opacity' ) ), 30 defaultOpacity = opacity ? opacity : 0, 31 curOpacityIn = defaultOpacity, 32 curOpacityOut = opacity ? opacity : 1, 33 34 zoomScale = parseFloat( $this.data( 'zoom' ) ), 35 zoomScale = zoomScale ? zoomScale : 3, 36 curZoomIn = zoomScale, 37 curZoomOut = zoomScale, 38 39 rotateSize = parseFloat( $this.data( 'rotate' ) ), 40 rotateSize = rotateSize ? rotateSize : 180, 41 curRotateX = rotateSize, 42 curRotateY = rotateSize, 43 curRotateZ = rotateSize, 44 45 moveSize = parseFloat( $this.data( 'move' ) ), 46 moveSize = moveSize ? moveSize : 500, 47 curMoveTop = moveSize, 48 curMoveBottom = moveSize, 49 curMoveLeft = moveSize, 50 curMoveRight = moveSize, 51 52 elHeight = $this.outerHeight(), 53 elTop = $this.offset().top, 54 elArea = elHeight + elTop, 55 winHeight = $( window ).outerHeight(), 56 winHeight = winHeight + 60, 57 winTop = window.pageYOffset - 30; 58 59 function currentPercent(curSize, pos) { 60 return (curSize / 100) * pos; 61 } 62 63 $( window ).on( 'load', function() { 64 var loadTransform = ''; 65 66 if ( elTop > (winTop + winHeight) ) { 67 curMoveTop = 0; 68 curMoveBottom = 0; 69 curMoveRight = 0; 70 curMoveLeft = 0; 71 curZoomIn = 1; 72 curStretchSize = 0; 73 } else if ( winTop > elArea ) { 74 curMoveTop = moveSize; 75 curMoveBottom = moveSize; 76 curMoveRight = moveSize; 77 curMoveLeft = moveSize; 78 curZoomOut = 1; 79 curOpacityOut = 0; 80 curOpacityIn = 1; 81 curShrinkSize = 0; 82 } else if ( (winTop + winHeight) > elTop && elArea > winTop ) { 83 var pos = ( (elTop - winTop) / winHeight ) * 100; 84 var negPos = 100 - pos; 85 86 curMoveTop = currentPercent( moveSize, negPos ); 87 curMoveRight= currentPercent( moveSize, negPos ); 88 curMoveLeft = currentPercent( moveSize, negPos ); 89 curMoveBottom= currentPercent( moveSize, negPos ); 90 91 curRotateZ = currentPercent( rotateSize, pos ); 92 curRotateY = currentPercent( rotateSize, pos ); 93 curRotateX = currentPercent( rotateSize, pos ); 94 95 curZoomOut = currentPercent( zoomScale, pos ); 96 curZoomOut = (curZoomOut < 1) ? 1 : curZoomOut; 97 curZoomIn = currentPercent( zoomScale, negPos ); 98 curZoomIn = (curZoomIn > zoomScale) ? zoomScale : curZoomIn; 99 100 curOpacityOut = currentPercent( 1, pos ); 101 curOpacityOut = (curOpacityOut < 0) ? 0 : curOpacityOut; 102 curOpacityIn = currentPercent( 1, negPos ); 103 104 curShrinkSize = currentPercent( shrinkSize, pos ); 105 curShrinkSize = (curShrinkSize < 0) ? 0 : curShrinkSize; 106 curStretchSize = currentPercent( defaultLtrSpacing, negPos ); 107 } 108 109 if ( $this.hasClass( moveTopClass ) ) { 110 loadTransform += 'translateY(-' + curMoveTop + 'px) '; 111 } else if ( $this.hasClass( moveRightClass ) ) { 112 loadTransform += 'translateX(' + curMoveRight + 'px) '; 113 } else if ( $this.hasClass( moveLeftClass ) ) { 114 loadTransform += 'translateX(-' + curMoveLeft + 'px) '; 115 } else if ( $this.hasClass( moveBottomClass ) ) { 116 loadTransform += 'translateY(' + curMoveBottom + 'px) '; 117 } 118 119 if ( $this.hasClass( rotateZClass ) ) { 120 loadTransform += 'rotateZ(' + curRotateZ + 'deg) '; 121 } else if ( $this.hasClass( rotateYClass ) ) { 122 loadTransform += 'rotateY(' + curRotateY + 'deg) '; 123 } else if ( $this.hasClass( rotateXClass ) ) { 124 loadTransform += 'rotateX(' + curRotateX + 'deg) '; 125 } 126 127 if ( $this.hasClass( zoomInClass ) ) { 128 loadTransform += 'scale(' + curZoomIn + ') '; 129 } else if ( $this.hasClass( zoomOutClass ) ) { 130 loadTransform += 'scale(' + curZoomOut + ') '; 131 } 132 133 134 if ( loadTransform ) { 135 $this.css({ 136 transform: loadTransform, 137 }); 138 } 139 140 if ( $this.hasClass( fadeInClass ) ) { 141 $this.css({ 142 opacity: curOpacityIn, 143 }); 144 } else if ( $this.hasClass( fadeOutClass ) ) { 145 $this.css({ 146 opacity: curOpacityOut, 147 }); 148 } 149 150 if ( $this.hasClass( textShrinkClass ) ) { 151 $this.css({ 152 letterSpacing: curShrinkSize + 'px', 153 }); 154 } else if ( $this.hasClass( textStretchClass ) ) { 155 $this.css({ 156 letterSpacing: curStretchSize + 'px', 157 }); 158 } 159 }); 160 161 $( window ).on( 'scroll', function() { 162 var newWinTop = window.pageYOffset - 30; 163 var scrollTransform = ''; 164
165 if ( (newWinTop + winHeight) > elTop && elArea > newWinTop ) { 166 var pos = ( (elTop - newWinTop) / winHeight ) * 100; 167 var negPos = 100 - pos; 168 169 curMoveTop = currentPercent( moveSize, negPos ); 170 curMoveRight= currentPercent( moveSize, negPos ); 171 curMoveLeft = currentPercent( moveSize, negPos ); 172 curMoveBottom= currentPercent( moveSize, negPos ); 173 curRotateZ = currentPercent( rotateSize, pos ); 174 curRotateY = currentPercent( rotateSize, pos ); 175 curRotateX = currentPercent( rotateSize, pos ); 176 curZoomOut = currentPercent( zoomScale, pos ); 177 curZoomIn = currentPercent( zoomScale, negPos ); 178 curOpacityOut = currentPercent( 1, pos ); 179 curOpacityIn = currentPercent( 1, negPos ); 180 curShrinkSize = currentPercent( shrinkSize, pos ); 181 curStretchSize = currentPercent( defaultLtrSpacing, negPos ); 182 183 if ( $this.hasClass( moveTopClass ) && curMoveTop > 0 ) { 184 scrollTransform += 'translateY(-' + curMoveTop + 'px) '; 185 } else if ( $this.hasClass( moveRightClass ) && curMoveRight > 0 ) { 186 scrollTransform += 'translateX(' + curMoveRight + 'px) '; 187 } else if ( $this.hasClass( moveLeftClass ) && curMoveLeft > 0 ) { 188 scrollTransform += 'translateX(-' + curMoveLeft + 'px) '; 189 } else if ( $this.hasClass( moveBottomClass ) && curMoveBottom > 0 ) { 190 scrollTransform += 'translateY(' + curMoveBottom + 'px) '; 191 } 192 193 if ( $this.hasClass( rotateZClass ) && curRotateZ >= 0 ) { 194 scrollTransform += 'rotateZ(' + curRotateZ + 'deg) '; 195 } else if ( $this.hasClass( rotateYClass ) && curRotateY >= 0 ) { 196 scrollTransform += 'rotateY(' + curRotateY + 'deg) '; 197 } else if ( $this.hasClass( rotateXClass ) && curRotateX >= 0 ) { 198 scrollTransform += 'rotateX(' + curRotateX + 'deg) '; 199 } 200 201 if ( $this.hasClass( zoomInClass ) && curZoomIn <= zoomScale ) { 202 scrollTransform += 'scale(' + curZoomIn + ') '; 203 } else if ( $this.hasClass( zoomOutClass ) && curZoomOut <= zoomScale ) { 204 scrollTransform += 'scale(' + curZoomOut + ') '; 205 } 206 207 if ( scrollTransform ) { 208 $this.css({ 209 transform: scrollTransform, 210 }); 211 } 212 213 if ( $this.hasClass( fadeInClass ) && curOpacityIn <= 1 && curOpacityIn >= 0 ) { 214 $this.css({ 215 opacity: curOpacityIn, 216 }); 217 } else if ( $this.hasClass( fadeOutClass ) && curOpacityOut <= 1 && curOpacityOut >= 0 ) { 218 $this.css({ 219 opacity: curOpacityOut, 220 }); 221 } 222 223 if ( $this.hasClass( textShrinkClass ) && curShrinkSize >= 0 ) { 224 $this.css({ 225 letterSpacing: curShrinkSize + 'px', 226 }); 227 } else if ( $this.hasClass( textStretchClass ) && curStretchSize >= stretchSize ) { 228 $this.css({ 229 letterSpacing: curStretchSize + 'px', 230 }); 231 } 232 } 233 }); 234 }); 235 } 236 237 function mkParallaxAnimationExt($scope) { 238 function callMousemove(e, elem) { 239 var $this = $(elem); 240 var target = $this.find('.mk-parallax-item'); 241 var relX = e.pageX - $this.offset().left; 242 var relY = e.pageY - $this.offset().top; 243 244 target.each(function(index, el) { 245 var $el = $(this); 246 var movement = $el.data('velocity'); 247 248 TweenMax.to($el, 1, { 249 x: (relX - $this.width() / 2) / $this.width() * movement, 250 y: (relY - $this.height() / 2) / $this.height() * movement, 251 ease: Power2.easeOut 252 }); 253 }); 254 } 255 256 var mkTimeout; 257 var $section = $($scope); 258 var $sectionID = $section.data('id'); 259 260 if ( $section.hasClass('mk-parallax-yes') ) { 261 var mkParallaxWrapperSelector = '.mk-parallax-wrap-'+ $sectionID; 262 var mkParallaxWrapSelector = '.mk-parallax-wrap.mk-parallax-wrap-'+ $sectionID; 263 var $mkParallaxWrapDetach = $section.siblings( mkParallaxWrapperSelector ).detach(); 264 $section.prepend($mkParallaxWrapDetach); 265 266 var $parallax = $( mkParallaxWrapperSelector ).find('.mk-parallax'); 267 $parallax.mkParallax(); 268 269 $(mkParallaxWrapSelector).on('mousemove', function (e) { 270 if ( mkTimeout ) { 271 clearTimeout(mkTimeout); 272 } 273 mkTimeout = setTimeout(callMousemove(e, this), 100); 274 }); 275 } 276 277 } 278 279 function mkScrollAnimationExt($scope) { 280 281 var widgetExt = mkElemFrontendObject(elementorFrontend,$scope), 282 breakpoints = elementorFrontend.config.breakpoints; 283 284 if(typeof widgetExt != 'undefined') { 285 286 //Begin scroll animation 287 if(typeof widgetExt.mk_ext_is_scrollme != 'undefined' && widgetExt.mk_ext_is_scrollme == 'true') { 288 var scrollArgs = {}; 289 if(typeof widgetExt.mk_ext_scrollme_scalex.size != 'undefined' && widgetExt.mk_ext_scrollme_scalex.size != 1) { scrollArgs['scaleX'] = widgetExt.mk_ext_scrollme_scalex.size; } 290 if(typeof widgetExt.mk_ext_scrollme_scaley.size != 'undefined' && widgetExt.mk_ext_scrollme_scaley.size != 1) { scrollArgs['scaleY'] = widgetExt.mk_ext_scrollme_scaley.size; } 291 if(typeof widgetExt.mk_ext_scrollme_scalez.size != 'undefined' && widgetExt.mk_ext_scrollme_scalez.size != 1) { scrollArgs['scaleZ'] = widgetExt.mk_ext_scrollme_scalez.size; } 292 if(typeof widgetExt.mk_ext_scrollme_rotatex.size != 'undefined' && widgetExt.mk_ext_scrollme_rotatex.size != 0) { scrollArgs['rotateX'] = widgetExt.mk_ext_scrollme_rotatex.size; } 293 if(typeof widgetExt.mk_ext_scrollme_rotatey.size != 'undefined' && widgetExt.mk_ext_scrollme_rotatey.size != 0) { scrollArgs['rotateY'] = widgetExt.mk_ext_scrollme_rotatey.size; } 294 if(typeof widgetExt.mk_ext_scrollme_rotatez.size != 'undefined' && widgetExt.mk_ext_scrollme_rotatez.size != 0) { scrollArgs['rotateY'] = widgetExt.mk_ext_scrollme_rotatez.size; } 295 if(typeof widgetExt.mk_ext_scrollme_translatex.size != 'undefined' && widgetExt.mk_ext_scrollme_translatex.size != 0) { scrollArgs['x'] = widgetExt.mk_ext_scrollme_translatex.size; } 296 if(typeof widgetExt.mk_ext_scrollme_translatey.size != 'undefined' && widgetExt.mk_ext_scrollme_translatey.size != 0) { scrollArgs['y'] = widgetExt.mk_ext_scrollme_translatey.size; } 297 if(typeof widgetExt.mk_ext_scrollme_translatez.size != 'undefined' && widgetExt.mk_ext_scrollme_translatez.size != 0) { scrollArgs['z'] = widgetExt.mk_ext_scrollme_translatez.size; } 298 if(typeof widgetExt.mk_ext_scrollme_smoothness.size != 'undefined') { scrollArgs['smoothness'] = widgetExt.mk_ext_scrollme_smoothness.size; } 299 300 $scope.attr('data-parallax', JSON.stringify(scrollArgs)); 301 302 if(typeof widgetExt.mk_ext_scrollme_disable != 'undefined') { 303 if(widgetExt.mk_ext_scrollme_disable == 'mobile') {
304 if(parseInt(jQuery(window).width()) < breakpoints.sm) { $scope.addClass('noanimation'); } 305 } 306 307 if(widgetExt.mk_ext_scrollme_disable == 'tablet') { 308 if(parseInt(jQuery(window).width()) < breakpoints.md ) { $scope.addClass('noanimation'); } 309 } 310 311 jQuery(window).resize(function() { 312 if(widgetExt.mk_ext_scrollme_disable == 'mobile') { 313 if(isMobileDevice() || parseInt(jQuery(window).width()) < breakpoints.sm) { 314 $scope.addClass('noanimation'); 315 } else { 316 $scope.removeClass('noanimation'); 317 } 318 } 319 320 if(widgetExt.mk_ext_scrollme_disable == 'tablet') { 321 if(parseInt(jQuery(window).width()) < breakpoints.md) { 322 $scope.addClass('noanimation'); 323 } else { 324 $scope.removeClass('noanimation'); 325 } 326 } 327 }); 328 } 329 330 } 331 332 } 333 } 334 335 function mkInfiniteAnimationExt($scope) { 336 var widgetExt = mkElemFrontendObject(elementorFrontend,$scope); 337 338 if(typeof widgetExt != 'undefined') { 339 340 //Begin infinite animation 341 if(typeof widgetExt.mk_ext_is_infinite != 'undefined' && widgetExt.mk_ext_is_infinite == 'true') { 342 var animationClass = '', 343 keyframeName = '', 344 animationCSS = '', 345 alternateAnim = ' alternate'; 346 347 if(typeof widgetExt.mk_ext_infinite_animation != 'undefined') { 348 animationClass = widgetExt.mk_ext_infinite_animation; 349 switch(animationClass) { 350 case 'if_swing1': keyframeName = 'swing'; break; 351 case 'if_swing2': keyframeName = 'swing2'; break; 352 case 'if_wave': keyframeName = 'wave'; alternateAnim =''; break; 353 case 'if_tilt': keyframeName = 'tilt'; break; 354 case 'if_bounce': keyframeName = 'bounce'; break; 355 case 'if_scale': keyframeName = 'scale'; break; 356 case 'if_spin': keyframeName = 'spin'; break; 357 case 'if_spin2': keyframeName = 'spin'; alternateAnim =''; break; 358 } 359 360 animationCSS+= keyframeName+' '; 361 } 362 //alert(widgetExt.mk_ext_infinite_duration); 363 if(typeof widgetExt.mk_ext_infinite_duration != 'undefined') { 364 animationCSS+= widgetExt.mk_ext_infinite_duration+'s '; 365 } 366 367 animationCSS+= 'infinite' + alternateAnim + ' '; 368 369 if(typeof widgetExt.mk_ext_infinite_easing != 'undefined') { 370 animationCSS+= 'cubic-bezier('+widgetExt.mk_ext_infinite_easing+')'; 371 } 372 //alert(animationCSS); 373 $scope.css({'animation' : animationCSS}); 374 $scope.addClass(animationClass); 375 } 376 //End infinite animation 377 378 } 379 } 380 381 function mkClipAnimationExt($scope) { 382 var $section = $($scope); 383 var $sectionID = $section.data('id'); 384 385 if ( $section.hasClass('mk-clips-animation-yes') ) { 386 var mkClipsWrapSelector = '.mk-clips-anim-wrap-'+ $sectionID; 387 var $mkClipsWrapDetach = $section.siblings( mkClipsWrapSelector ).detach(); 388 $section.prepend($mkClipsWrapDetach); 389 390 var $clips = $( mkClipsWrapSelector ).find('.mk-clips-anim'); 391 $clips.each(function(index, el) { 392 var $this = $(this); 393 var data = $this.data('clips-anim'); 394 395 anime({ 396 targets: this, 397 translateX: data.moveX, 398 translateY: data.moveY, 399 scaleX: data.zoomX, 400 scaleY: data.zoomY, 401 skewX: data.skewX, 402 skewY: data.skewY, 403 rotateX: data.rotateX, 404 rotateY: data.rotateY, 405 rotateZ: data.rotateZ, 406 opacity: data.fade, 407 easing: data.easing, 408 loop: true, 409 duration: data.duration, 410 delay: data.delay, 411 direction: 'alternate', 412 }); 413 }); 414 } 415 } 416 417 function mkParallaxCalc($holder) { 418 419 $holder.speed = (Math.random() * .2 + 1.06).toFixed(2); //if 1 no effect will be applied, use values between -1 and 2 420 $holder.speedNormalized = ($holder.speed - 1).toFixed(2); 421 422 $holder.$imgInner.css( { 423 'top': - Math.abs( $holder.speedNormalized * 100 ) + '%', 424 'height': 100 + Math.abs( $holder.speedNormalized * 100 ) + '%' 425 } ); 426 427 var wH = $holder.$imgHolder.height(), 428 wW = $holder.$imgHolder.width(), 429 heightDiff = $holder.$img.height() - wH, 430 widthDiff = $holder.$img.width() - wW; 431 432 if ( widthDiff < 0 && widthDiff <= heightDiff ) { 433 $holder.$img.css({ 'width': '100%', 'height': 'auto' } ); 434 } 435 436 if ( heightDiff < 0 && heightDiff <= widthDiff ) { 437 $holder.$img.css({ 'height': '100%', 'width': 'auto', 'max-width': 'unset', } ); 438 } 439 } 440 441 function mkParallaxBasic($scope) { 442 443 var $body = $( 'body' ), 444 $html = $( 'html' ); 445 446 let $holder = $scope.find('.mk-parallax-basic-wrap'); 447 448 var isSupported = ! $html.hasClass( 'mk--touch' ) && ! $body.hasClass( 'swm-browser--edge' ) && ! $body.hasClass( 'swm-browser--ms-explorer' ); 449 450 if ( $holder.length && isSupported ) { 451 452 $holder.container = $holder.find( '.mk-parallax-basic-wrap' ); 453 $holder.$imgInner = $holder.find( '.mk-parallax-basic-inner' ); 454 $holder.$imgHolder = $holder.find( '.mk-parallax-basic-img-holder' );
455 $holder.$img = $holder.find( 'img.mk-parallax-basic-img' ); 456 457 swmTheme.swmWaitForImages( $holder, function () { 458 459 $holder.$imgInner.animate( { opacity: 1 }, 1000 ); 460 mkParallaxCalc($holder); 461 462 $holder.each( function (i) { 463 464 if ( $holder.speedNormalized == 0 ) return; 465 466 var maxY = Math.round($holder.outerHeight() * $holder.speedNormalized - 10),//10 arbitrary num to avoid glitches 467 duration = Math.random() * .5 + .3; 468 duration = .7; 469 470 gsap.registerPlugin(ScrollTrigger); 471 472 if ( $(window).width() >= 1024 ) { 473 const tl = gsap.timeline({ 474 defaults: {duration: 1}, 475 scrollTrigger: { 476 trigger: $holder, 477 scrub: true, 478 start: () => { return "top bottom"}, 479 end: () => { return "bottom top"; }, 480 onUpdate: (self) => { 481 if (i === 0 || 5 > 4){ 482 gsap.to ( $holder.$imgHolder, { 483 y : maxY * self.progress.toFixed(2), 484 duration: duration, 485 }) 486 } 487 } 488 } 489 }); 490 } 491 492 }); 493 494 }); 495 496 $( window ).on('resize', function () { 497 mkParallaxCalc($holder); 498 }); 499 500 } 501 502 } 503 504 function mkParallaxBasicExt($scope) { 505 506 var $section = $($scope); 507 var $sectionID = $section.data('id'); 508 509 // move code inside elementor section/container div 510 if ( $section.hasClass('mk-parallax-basic-yes') ) { 511 var mkParallaxBasicSelector = '.mk-parallax-basic-wrap-'+ $sectionID; 512 var mkParallaxWrapSelector = '.mk-parallax-basic-wrap.mk-parallax-basic-wrap-'+ $sectionID; 513 var $mkParallaxWrapDetach = $section.siblings( mkParallaxBasicSelector ).detach(); 514 $section.prepend($mkParallaxWrapDetach); 515 var $parallax = $( mkParallaxBasicSelector ).find('.mk-parallax'); 516 mkParallaxBasic($scope) 517 } 518 519 } 520 521 function mkPinArea($scope) { 522 523 var $section = $($scope); 524 var $sectionID = $section.data('id'); 525 526 if ($('body').hasClass('elementor-editor-active')) { return; } 527 528 if ( $section.hasClass('mk-enable-pin-area-yes') ) { 529 530 var winWidth = $(window).width(), 531 breakpoints = elementorFrontend.config.responsive.activeBreakpoints, 532 baseHandler = elementorModules.frontend.handlers.Base; 533 534 var pinHandler = baseHandler.extend({ 535 bindEvents: function() { 536 if (!this.isEdit || 'yes' === this.getElementSettings('mk_enable_pin_area')) { 537 if (this.getElementSettings('mk_pin_breakpoint')) { 538 winWidth > breakpoints[this.getElementSettings('mk_pin_breakpoint')].value && this.run(); 539 } else { 540 this.run(); 541 } 542 } 543 }, 544 run: function() { 545 var elem = $scope, 546 start = this.getElementSettings('mk_pin_area_start'), 547 end = this.getElementSettings('mk_pin_area_end'), 548 endTrigger = this.getElementSettings('mk_pin_end_trigger'); 549 550 if ('custom' === start) { start = this.getElementSettings('mk_pin_area_start_custom'); } 551 if ('custom' === end) { end = this.getElementSettings('mk_pin_area_end_custom'); } 552 if ( this.getElementSettings('mk_custom_pin_area') ) { elem = this.getElementSettings('mk_custom_pin_area'); } 553 554 gsap.to($scope, { 555 scrollTrigger: { 556 trigger: elem, 557 endTrigger: endTrigger, 558 pin: $scope, 559 pinSpacing: false, 560 start: start, 561 end: end, 562 delay: 0.5, 563 markers: false, 564 onLeave: function() { 565 if ( $section.hasClass('mk-auto-hide-pin-yes') ) { 566 // Add class when the second element completes scrolling 567 $($section).addClass('hide-pin-area'); 568 } 569 }, 570 onEnter: function() { 571 if ( $section.hasClass('mk-auto-hide-pin-yes') ) { 572 // Add class when the third element starts scrolling 573 $($section).addClass('show-pin-area'); 574 $($section).removeClass('hide-pin-area'); 575 } 576 }, 577 onLeaveBack: function() { 578 if ( $section.hasClass('mk-auto-hide-pin-yes') ) { 579 // Check if the element is at the top of the viewport 580 var offset = $section.offset().top; 581 var windowScrollTop = $(window).scrollTop(); 582 583 // If the element is at the top of the viewport, add the class 584 if (offset <= windowScrollTop) { 585 $($section).addClass('show-pin-area'); 586 $($section).removeClass('hide-pin-area'); 587 } else { 588 $($section).removeClass('show-pin-area'); 589 } 590 } 591 }, 592 onEnterBack: function() { 593 if ( $section.hasClass('mk-auto-hide-pin-yes') ) { 594 // Reapply the class when scrolling back down 595 $($section).addClass('show-pin-area'); 596 $($section).removeClass('hide-pin-area'); 597 } 598 }, 599 onUpdate: function(self) { 600 if ( $section.hasClass('mk-auto-hide-pin-yes') ) { 601 // Trigger adding the class when scrolling up (before reaching the bottom) 602 var scrollDirection = self.direction; 603 604 // If scrolling up, add the class when the element is approaching the top 605 if (scrollDirection === -1) { 606 var offset = $section.offset().top; 607 var windowScrollTop = $(window).scrollTop(); 608 609 if (offset <= windowScrollTop) { 610 $($section).addClass('show-pin-area'); 611 $($section).removeClass('hide-pin-area'); 612 } 613 } 614 } 615 } 616 617 } 618 }); 619 620 $scope.css('transition', 'none'); 621 } 622 }); 623 624 elementorFrontend.elementsHandler.addHandler(pinHandler, {$element: $scope }); 625 626 } 627 628 } 629 630 function mkMouseMoveEffect($scope) { 631 632 var $section = $($scope); 633 var $sectionID = $section.data('id'); 634 635 if ( $section.hasClass('mk-enable-mouse-move-effect-yes') ) { 636 637 var baseHandler = elementorModules.frontend.handlers.Base; 638 639 var mkMouseMoveEffectHandler = baseHandler.extend({ 640 bindEvents: function() { 641 this.initialize(); 642 }, 643 initialize: function() { 644 if (!this.isEdit && this.getElementSettings('mk_enable_mouse_move_effect')) { 645 var element = this.$element;
646 if ('custom' === this.getElementSettings('mk_mouse_move_area_trigger')) { 647 element = $(this.getElementSettings('mk_custom_mouse_move_area')); 648 } 649 element.on('mousemove', this.handleMouseMove); 650 } 651 }, 652 getTypedValue: function(value) { 653 return isNaN(Number(value)) || value === true || value === false 654 ? value === 'true' || value !== 'false' && value 655 : Number(value); 656 }, 657 handleMouseMove: function(event) { 658 var mouseMoveX = this.getElementSettings('mk_mouse_move_x'), 659 mouseMoveY = this.getElementSettings('mk_mouse_move_y'), 660 moveDuration = this.getElementSettings('mk_mouse_move_duration'), 661 customConfig = this.getCustomConfig(), 662 windowWidth = window.innerWidth, 663 windowHeight = window.innerHeight, 664 animationProps = { 665 x: (event.clientX / windowWidth - 0.5) * mouseMoveX, 666 y: (event.clientY / windowHeight - 0.5) * mouseMoveY, 667 ease: 'power3.out', 668 duration: moveDuration 669 }, 670 animationOptions = Object.assign({}, customConfig, animationProps); 671 672 gsap.to(this.$element, animationOptions); 673 }, 674 getCustomConfig: function() { 675 var self = this, 676 customSettings = this.getElementSettings('mk_mouse_move_custom'), 677 config = {}; 678 679 if (!customSettings) return config; 680 681 customSettings.length && customSettings.split(",").map((function(setting) { 682 if (setting.replace(/\s/g, '').length !== 0) { 683 var keyValue = setting.split(':').filter((function(item) { 684 return item.replace(/\s/g, "").length !== 0; 685 })); 686 if (keyValue.length === 2) { 687 var key = keyValue[0].replace(/\s/g, ''), 688 value = keyValue[keyValue.length - 1].replace(/\s/g, ""); 689 config[key] = self.getTypedValue(value); 690 } 691 } 692 })); 693 694 return config; 695 } 696 }); 697 698 elementorFrontend.elementsHandler.addHandler(mkMouseMoveEffectHandler, {$element: $scope }); 699 700 } 701 702 } 703 704 function mkFadeAnimation($scope) { 705 706 var $section = $($scope); 707 var $sectionID = $section.data('id'); 708 709 if ( !$section.hasClass('mk-enable-fade-animation-none') ) { 710 711 var baseHandler = elementorModules.frontend.handlers.Base, 712 breakpoints = elementorFrontend.config.responsive.activeBreakpoints, 713 gsapMedia = gsap.matchMedia(); 714 715 var mkFadeAnimationHandler = baseHandler.extend({ 716 bindEvents: function() { 717 this.initialize(); 718 }, 719 initialize: function() { 720 721 var $this = this; 722 723 if ("fade" === this.getElementSettings('mk-animation-effect') && (!this.isEdit || this.getElementSettings('mk_enable_animation_editor'))) { 724 725 var fadeDirection = this.getElementSettings('fade-from'), 726 scrollEnabled = this.getElementSettings('on-scroll'), 727 animationDuration = this.getElementSettings('data-duration'), 728 fadeOffset = this.getElementSettings('fade-offset'), 729 animationDelay = this.getElementSettings('delay'), 730 easingEffect = this.getElementSettings('ease'), 731 breakpointType = 'all'; 732 733 if (this.getElementSettings('fade_animation_breakpoint')) { 734 var breakpointValue = breakpoints[this.getElementSettings('fade_animation_breakpoint')].value; 735 breakpointType = 'min' === this.getElementSettings('fade_breakpoint_min_max') ? 'min-width: ' + breakpointValue + 'px' : 'max-width: ' + breakpointValue + 'px'; 736 } 737 738 var animationSettings = { 739 opacity: 0,
740 ease: easingEffect, 741 duration: animationDuration, 742 delay: animationDelay 743 }; 744 745 if ('top' === fadeDirection) animationSettings.y = -fadeOffset; 746 if ('bottom' === fadeDirection) animationSettings.y = fadeOffset; 747 if ('left' === fadeDirection) animationSettings.x = -fadeOffset; 748 if ('right' === fadeDirection) animationSettings.x = fadeOffset; 749 750 if (scrollEnabled) { 751 animationSettings.scrollTrigger = { 752 trigger: this.$element, 753 start: 'top 85%' 754 }; 755 } 756 757 this.$element.css('transition', 'none'); 758 759 if ('all' === breakpointType) { 760 gsap.from(this.$element, animationSettings); 761 } else { 762 gsapMedia.add('('.concat(breakpointType, ')'), function() { 763 return gsap.from($this.$element, animationSettings), 764 function() {}; 765 }); 766 767 } 768 769 770 } 771 772 } 773 }); 774 775 elementorFrontend.elementsHandler.addHandler(mkFadeAnimationHandler, {$element: $scope }); 776 777 } 778 779 } 780 781 782 $( window ).on('elementor/frontend/init', function() { 783 elementorFrontend.hooks.addAction('frontend/element_ready/section', mkParallaxAnimationExt ); 784 elementorFrontend.hooks.addAction('frontend/element_ready/container', mkParallaxAnimationExt ); 785 elementorFrontend.hooks.addAction('frontend/element_ready/global', mkScrollAnimationExt); 786 elementorFrontend.hooks.addAction('frontend/element_ready/global', mkInfiniteAnimationExt); 787 elementorFrontend.hooks.addAction('frontend/element_ready/section', mkClipAnimationExt ); 788 elementorFrontend.hooks.addAction('frontend/element_ready/container', mkClipAnimationExt ); 789 elementorFrontend.hooks.addAction('frontend/element_ready/section', mkParallaxBasicExt ); 790 elementorFrontend.hooks.addAction('frontend/element_ready/container', mkParallaxBasicExt ); 791 elementorFrontend.hooks.addAction('frontend/element_ready/container', mkPinArea ); 792 elementorFrontend.hooks.addAction('frontend/element_ready/widget', mkMouseMoveEffect ); 793 elementorFrontend.hooks.addAction('frontend/element_ready/container', mkMouseMoveEffect ); 794 795 elementorFrontend.hooks.addAction('frontend/element_ready/widget', mkFadeAnimation ); 796 elementorFrontend.hooks.addAction('frontend/element_ready/container', mkFadeAnimation ); 797 798 }); 799 800 var $animationElements = $(".mk-colors-anim-yes"); 801 $animationElements.each(function(index, el) { 802 var $elem = $(el); 803 var data = $elem.data('mk-anim-colors'); 804 var length = data.colors.length; 805 var colors = data.colors.toString(); 806 807 if ( 'hor-moving' == data.type ) { 808 $elem.css({ 809 'background-color' : data.colors[0], // For browsers that do not support gradients 810 'background-image' : 'linear-gradient('+ data.angle +'deg,'+ colors +')', 811 'background-size' : length +'00% 100%', 812 }); 813 } else if ( 'ver-moving' == data.type ) { 814 $elem.css({ 815 'background-color' : data.colors[0], // For browsers that do not support gradients 816 'background-image' : 'linear-gradient('+ data.angle +'deg,'+ colors +')', 817 'background-size' : '100%'+ length +'00%', 818 }); 819 } 820 }); 821 822})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.