1/* ------------------------------------------------------- 2 3 Theme Name: Crafto - The Multipurpose HTML5 Template 4 Theme URL: https://craftohtml.themezaa.com/ 5 Description: Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 48+ ready demos. 6 Author: ThemeZaa - https://www.themezaa.com/ 7 Author ThemeForest URL: https://themeforest.net/user/themezaa 8 Copyright(c) 2024 themezaa.com 9 Version: 1.0 10 11 ------------------------------------------------------- */ 12 13(function ($) { 14 15 "use strict"; 16 /* =================================== 17 Change variables value as per your need 18 ====================================== */ 19 20 var menuBreakPoint = 991; 21 var sliderBreakPoint = 991; // It will effect when you have used attribute "data-thumb-slider-md-direction" OR "data-slider-md-direction" 22 var animeBreakPoint = 1199; 23 var headerTransition = 300; // Header transition effect time 24 25 /* =================================== 26 Touch device 27 ====================================== */ 28 29 var isTouchDevice = (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)); 30 if (isTouchDevice) { 31 $('body').addClass('is-touchable'); 32 } 33 34 /* =================================== 35 Don't change variables value 36 ====================================== */ 37 38 var lastScroll = 0, 39 simpleDropdown = 0, 40 linkDropdown = 0, 41 isotopeObjs = [], 42 swiperObjs = []; 43 var windowScrollTop = window.pageYOffset || document.documentElement.scrollTop; 44 45 /* =================================== 46 Check for browser OS 47 ====================================== */ 48 49 var isMobile = false, 50 isiPhoneiPad = false, 51 isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); 52 53 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 54 isMobile = true; 55 } 56 57 if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) { 58 isiPhoneiPad = true; 59 } 60 61 /* =================================== 62 jQuery appear 63 ====================================== */ 64 65 $('.vertical-counter, .counter, .progress-bar, .pie-chart-style-01, .attractive-hover, .splitting-animation, .section-dark, footer, [data-anime], [data-fancy-text]').each(function () { 66 $(this).appear().trigger('resize'); 67 }); 68 69 initScrollNavigate(); 70 slideboxstyle(); 71 animateCounters(); 72 setSpaceInTeamStyle(); 73 setSpaceInInteractiveBannerStyle(); 74 setOverLayerPosition(); 75 setBottomOverLayerPosition(2000); 76 setupSwiper(); 77 78 /* =================================== 79 Header 80 ====================================== */ 81 82 // Mobile menu - modern style 83 var mobileStyle = $('body').attr('data-mobile-nav-style'); 84 if ((mobileStyle == 'modern' || mobileStyle == 'full-screen-menu') && !$('.navbar-' + mobileStyle + '-inner').length) { 85 if (!$('.box-layout').length && mobileStyle == 'modern') { 86 $('section, footer').wrapAll('<div class="page-layout"></div>'); 87 } else { 88 $('section').wrapAll('<div class="page-layout"></div>'); 89 } 90 91 $('.navbar .navbar-toggler').clone(true).addClass('navbar-toggler-clone').insertAfter('.page-layout'); 92 $('.navbar .navbar-collapse').clone(true).addClass('navbar-collapse-clone').attr('id', 'navbarNav-clone').insertAfter('.page-layout'); 93 94 $('.navbar-toggler-clone, .navbar-collapse-clone').wrapAll('<div class="navbar-' + mobileStyle + '-inner"></div>'); 95 $('.navbar-toggler').attr('data-target', '#navbarNav-clone').attr('aria-controls', '#navbarNav-clone'); 96 $('.navbar-' + mobileStyle + '-inner').find('.dropdown-toggle').addClass('dropdown-toggle-clone'); 97 if (typeof $.fn.mCustomScrollbar === 'function') { 98 if ($('.navbar-collapse-clone').length) { 99 var scrollOptions = $('.navbar-collapse-clone').attr('data-scroll-options') || '{ "theme": "light" }'; 100 if (typeof (scrollOptions) !== 'undefined' && scrollOptions !== null) { 101 scrollOptions = $.parseJSON(scrollOptions); 102 $('.navbar-collapse-clone').mCustomScrollbar(scrollOptions); 103 } 104 } 105 } 106 if (mobileStyle == 'modern') {
107 $('<div class="navbar-show-modern-bg"></div>').insertAfter('.page-layout'); 108 } 109 } 110 111 // Navbar collapse - classic menu 112 $('.navbar-collapse.collapse').on('show.bs.collapse', function (e) { 113 if (!$('body').hasClass('navbar-collapse-show')) { 114 $('body').addClass('navbar-collapse-show'); 115 $('html').addClass('overflow-hidden'); 116 if ($('body').attr('data-mobile-nav-bg-color') && $('.navbar-modern-inner').length) { 117 var bgColor = $('body').attr('data-mobile-nav-bg-color'); 118 $('.navbar-show-modern-bg').css('background', bgColor); 119 } 120 if ($('body').attr('data-mobile-nav-bg-color') && $('.navbar-full-screen-menu-inner').length) { 121 var bgColor = $('body').attr('data-mobile-nav-bg-color'); 122 $('.navbar-full-screen-menu-inner').css('background', bgColor); 123 } 124 // Set submenu height after opened toggle menu 125 if (getWindowWidth() <= menuBreakPoint) { 126 var windowHeight = getWindowHeight(), 127 headerHeight = getHeaderHeight(); 128 $('header .navbar-collapse').css('max-height', windowHeight - headerHeight); 129 } 130 } else { 131 if ($('.navbar-modern-inner').length) { 132 setTimeout(function () {
133 $('.navbar-show-modern-bg').css('background', ''); 134 }, 600); 135 } 136 if ($('.navbar-full-screen-menu-inner').length) { 137 setTimeout(function () { 138 $('.navbar-full-screen-menu-inner').css('background', ''); 139 }, 600); 140 } 141 } 142 var headerHeight = getHeaderHeight(); 143 var windowHeight = getWindowHeight(); 144 if ($('.navbar-modern-inner').length > 0 || $('.navbar-full-screen-menu-inner').length > 0) { 145 $('.navbar-collapse-clone').css('max-height', windowHeight); 146 } else { 147 $('.navbar-collapse-clone').css('max-height', (windowHeight - headerHeight)); 148 } 149 }).on('hide.bs.collapse', function (e) { 150 if ($('body').hasClass('navbar-collapse-show')) { 151 $('body').removeClass('navbar-collapse-show'); 152 $('html').removeClass('overflow-hidden'); 153 } 154 }); 155 156 // Sub menu collapse event 157 $('.sub-menu.collapse').on('show.bs.collapse', function (e) { 158 var activeMenuId = $(e.target).attr('id'); 159 $('[data-bs-target="#' + activeMenuId + '"]').addClass('show'); 160 $(this).parents('.menu-item').siblings().each(function () { 161 $('.sub-menu.show', this).collapse('hide'); 162 }); 163 stickyKitRecalc(); 164 }).on('hide.bs.collapse', function (e) { 165 var activeMenuId = $(e.target).attr('id'); 166 $('[data-bs-target="#' + activeMenuId + '"]').removeClass('show'); 167 $(e.target).find('.sub-menu.show').collapse('hide'); 168 stickyKitRecalc(); 169 }); 170 171 // Search popup open 172 $(document).on('click', '.search-form-icon', function (e) { 173 e.preventDefault(); 174 $('body').addClass('show-search-popup'); 175 }); 176 177 // Search popup close 178 $(document).on('click', '.search-close', function (e) { 179 e.preventDefault(); 180 $('body').removeClass('show-search-popup'); 181 }); 182 183 // Search validation 184 $(document).on('click', '.search-button', function () { 185 var error = true; 186 var formObj = $(this).parents('form'); 187 formObj.find('input[type=text]').each(function (index) { 188 var _this = $(this), 189 searchVal = _this.val(); 190 if (searchVal === null || searchVal === '') { 191 formObj.find('input:eq(' + index + ')').addClass('search-error'); 192 error = false; 193 } else { 194 formObj.find('input:eq(' + index + ')').removeClass('search-error'); 195 } 196 }); 197 return error; 198 }); 199 200 // Header push menu open 201 $(document).on('click', '.header-push-button .push-button', function () { 202 $('html, body').toggleClass('show-menu'); 203 }); 204 205 // Header push menu close 206 $(document).on('click', '.close-menu', function () { 207 $('html, body').removeClass('show-menu'); 208 // Close left menu 209 $('.sub-menu.show').collapse('hide'); 210 }); 211 212 // Close all left menu submenu 213 $(document).on('click', '#navbar-menu .navbar-toggler', function () { 214 // Close left menu 215 $('.sub-menu.show').collapse('hide'); 216 }); 217 218 // Close on outside area 219 $(document).on('click', 'body', function (e) { 220 // Close all menu 221 if (!($(e.target).closest('.navbar-nav').length || $(e.target).closest('.navbar-full-screen-menu-inner').length)) { 222 setTimeout(function () { 223 $('.navbar-collapse.collapse').collapse('hide'); 224 }, 100); 225 } 226 // Close push menu 227 if (!($(e.target).hasClass('push-button') || $(e.target).closest('.push-button').length || $(e.target).closest('.push-menu').length || $(e.target).closest('.hamburger-menu').length)) { 228 $('html, body').removeClass('show-menu'); 229 } 230 // Close search 231 if (!($(e.target).hasClass('search-form') || $(e.target).closest('.search-form-icon').length || $(e.target).closest('.search-form-box').length)) { 232 $('body').removeClass('show-search-popup'); 233 } 234 // Close dropdown menu, language and cart 235 if (!$(e.target).closest('.navbar-nav').length) { 236 if (!$(e.target).closest('.header-language').length) { 237 // Close language menu 238 $('.header-language').trigger('mouseleave'); 239 $('.header-language').removeClass('show'); 240 $('.header-language').children('.dropdown-menu').removeClass('show'); 241 } 242 if (!$(e.target).closest('.header-cart').length) { 243 // Close cart 244 $('.header-cart').trigger('mouseleave'); 245 $('.header-cart').removeClass('show'); 246 $('.header-cart').children('.dropdown-menu').removeClass('show'); 247 } 248 // Close all dropdown 249 $('.navbar-nav .dropdown').each(function () { 250 var _this = $(this); 251 _this.trigger('mouseleave'); 252 _this.removeClass('show'); 253 _this.children('.dropdown-menu').removeClass('show'); 254 }); 255 } else if ($(e.target).parents('body').find('.header-language.open').length) { 256 // Close language menu 257 $('.header-language').trigger('mouseleave'); 258 $('.header-language').removeClass('show'); 259 $('.header-language').children('.dropdown-menu').removeClass('show'); 260 } else if ($(e.target).parents('body').find('.header-cart.open').length) { 261 // Close cart 262 $('.header-cart').trigger('mouseleave'); 263 $('.header-cart').removeClass('show'); 264 $('.header-cart').children('.dropdown-menu').removeClass('show'); 265 } 266 // Close left-modern-header menu 267 if (!$(e.target).closest('.left-modern-header').length) { 268 $(".left-modern-header").collapse('hide'); 269 } 270 }); 271 272 // Close on escape key 273 $(document).on('keydown', function (e) { 274 if (e.keyCode === 27) { 275 // Close all menu 276 $('.navbar-collapse.collapse').collapse('hide'); 277 // Close left menu 278 $('#navbar-menu').collapse('hide'); 279 // Close push menu 280 $('html, body').removeClass('show-menu'); 281 // Close search 282 $('body').removeClass('show-search-popup'); 283 // Close left-modern-header menu 284 $(".left-modern-header").collapse('hide'); 285 } 286 }); 287 288 // Header submenu on hover 289 $('.nav-item.submenu').on('mouseenter touchstart', function (e) { 290 var _this = $(this), 291 colorAttr = $('header nav').attr('data-header-hover'); 292 if (getWindowWidth() > menuBreakPoint) { 293 if ($(e.target).siblings('.dropdown-menu').length) { 294 e.preventDefault(); 295 } 296 if (colorAttr == 'light') { 297 $('header nav').addClass('submenu-light').removeClass('submenu-dark'); 298 } else if (colorAttr == 'dark') { 299 $('header nav').addClass('submenu-dark').removeClass('submenu-light'); 300 } 301 } 302 }).on('mouseleave', function (e) { 303 var _this = $(this); 304 $('header nav').removeClass('submenu-light').removeClass('submenu-dark'); 305 }); 306 307 // Open menu on hover 308 $('.dropdown').on('mouseenter touchstart', function (e) { 309 var _this = $(this); 310 _this.siblings('.dropdown').removeClass('open'); 311 _this.parents('.navbar-nav').siblings('.navbar-nav').find('.dropdown').removeClass('open'); 312 if (getWindowWidth() >= menuBreakPoint) { 313 if (_this.hasClass('open') && _this[0] == $(e.target).parent()[0]) { 314 let href = $(_this).find('.nav-link').attr('href'); 315 if (href != 'undefined' && href.indexOf('javascript') === -1 && typeof undefined !== typeof href && href != '#') { 316 window.location.href = href; 317 } 318 } 319 } 320 _this.addClass('open'); 321 menuPosition(_this); 322 if (getWindowWidth() > menuBreakPoint) { 323 if ($(e.target).siblings('.dropdown-menu').length) { 324 e.preventDefault(); 325 } 326 // Header color remove click on simple dropdown menu 327 if ($(e.target).hasClass('simple-dropdown') || $(e.target).closest('.simple-dropdown').length) { 328 $('header nav').removeClass('submenu-light').removeClass('submenu-dark'); 329 } 330 } 331 }).on('mouseleave', function (e) { 332 var _this = $(this); 333 _this.removeClass('menu-left'); 334 _this.removeClass('open'); 335 }); 336 337 // Add active class to current menu 338 var pgurl = window.location.href.substr(window.location.href.lastIndexOf('/') + 1); 339 var $hash = window.location.hash.substring(1); 340 if ($hash) { 341 $hash = '#' + $hash; 342 pgurl = pgurl.replace($hash, ''); 343 } else { 344 pgurl = pgurl.replace('#', ''); 345 } 346 $('.navbar-nav li a, .menu-item-list a').each(function () { 347 var _this = $(this), 348 aHref = _this.attr('href'); 349 if (aHref === pgurl || aHref === pgurl + '.html') { 350 _this.parent().addClass('active'); 351 _this.parents('li.dropdown').addClass('active'); 352 _this.parents('li.menu-item').addClass('active'); 353 } 354 }); 355 356 // Sticky left menu 357 if ($.fn.stick_in_parent !== undefined && $.fn.stick_in_parent !== null) { 358 if ($('.left-sidebar-wrapper').length) { 359 $('.left-sidebar-wrapper .left-sidebar-nav').stick_in_parent({ 360 recalc: 1 361 }); 362 } 363 } 364 if (typeof $.fn.smoothScroll === 'function') { 365 if ($('.header-reverse').length > 0) { 366 $('.inner-link').smoothScroll({
367 speed: 800, 368 offset: -59, 369 beforeScroll: function () { 370 if ($('body').hasClass('left-menu-onepage')) { 371 $('.left-modern-header').collapse('hide'); 372 } 373 $('.navbar-collapse.collapse').collapse('hide'); 374 } 375 }); 376 } else { 377 if ($('.inner-link').length > 0) { 378 var offset = 0 379 if ($('nav.navbar').hasClass('disable-fixed')) { 380 offset = 1; 381 } 382 383 if ($('.left-modern-menu').hasClass('left-menu-onepage')) { 384 if (getWindowWidth() <= menuBreakPoint) { 385 offset = -59; 386 } 387 } 388 389 $('.inner-link').smoothScroll({ 390 speed: 800, 391 offset: offset, 392 beforeScroll: function () { 393 if ($('body').hasClass('left-menu-onepage')) { 394 $('.left-modern-header').collapse('hide'); 395 } 396 397 if ($('body').hasClass('show-menu')) { 398 $('html, body').removeClass('show-menu'); 399 } 400 $('.navbar-collapse.collapse').collapse('hide'); 401 } 402 }); 403 } 404 } 405 406 // Section link 407 if ($('.section-link').length > 0) { 408 $('.section-link').smoothScroll({ 409 speed: 900, 410 offset: 1, 411 beforeScroll: function () { 412 $('.navbar-collapse.collapse').collapse('hide'); 413 } 414 }); 415 } 416 } 417 418 $('.modern-side-menu .menu-item').on('click', function () { 419 $('.modern-side-menu .menu-item').removeClass('active'); 420 $(this).addClass('active'); 421 }); 422 423 // Get top space header height 424 function getHeaderHeight() { 425 var headerHeight = 0; 426 if ($('.header-top-bar').length) { 427 headerHeight = headerHeight + $('.header-top-bar').outerHeight(); 428 } 429 if ($('header nav.navbar').length) { 430 headerHeight = headerHeight + $('header nav.navbar').outerHeight(); 431 } 432 if ($('.left-modern-header .left-modern-sidebar').length) { 433 headerHeight = headerHeight + $('.left-modern-header .left-modern-sidebar').outerHeight(); 434 } 435 return headerHeight; 436 } 437 438 // Get top space height 439 function setTopSpaceHeight() { 440 441 if (!$('header').hasClass('sticky') && ($('.top-space-margin').length || $('.top-space-padding').length) || $('.ipad-top-space-margin').length) { 442 var headerHeight = getHeaderHeight(); 443 if ($('.top-space-margin').length) { 444 $('.top-space-margin').css('margin-top', headerHeight); 445 } 446 if ($('.top-space-padding').length) { 447 $('.top-space-padding').css('padding-top', headerHeight); 448 } 449 if ($('.ipad-top-space-margin').length) { 450 if (getWindowWidth() <= menuBreakPoint) { 451 $('.ipad-top-space-margin').css('margin-top', headerHeight); 452 } else { 453 $('.ipad-top-space-margin').css('margin-top', 'inherit'); 454 } 455 } 456 } 457 } 458 459 // Menu position 460 function menuPosition(element) { 461 var windowWidth = getWindowWidth(); 462 if (element.hasClass('simple-dropdown')) { 463 simpleDropdown = element; 464 linkDropdown = element.find('a.nav-link'); 465 var menuSpacing = 30, 466 menuLeftPosition = element.offset().left, 467 menuWidth = element.children('.dropdown-menu').outerWidth(), 468 menuDropdownCSS = (windowWidth - menuSpacing) - (menuLeftPosition + menuWidth); 469 if (menuDropdownCSS < 0) { 470 element.children('.dropdown-menu').css('left', menuDropdownCSS); 471 } 472 } 473 if (element.parent().hasClass('dropdown-menu') && element.parents('.simple-dropdown')) { 474 var dropdownWidth = 0, 475 maxValueInArray = 0,
476 lastValue = 0, 477 multiDepth = 0; 478 dropdownWidth = element.outerWidth() - linkDropdown.outerWidth(); 479 element.children('.dropdown-menu').each(function () { 480 var arr = []; 481 if (element.find('li').hasClass('dropdown')) { 482 dropdownWidth = dropdownWidth + element.outerWidth(); 483 element.find('li.dropdown').each(function () { 484 var dropdownMenu = element.closest('.dropdown-menu'); 485 arr.push(dropdownMenu.outerWidth()); 486 }); 487 maxValueInArray = lastValue + Math.max.apply(Math, arr); 488 lastValue = maxValueInArray; 489 dropdownWidth = dropdownWidth + maxValueInArray; 490 multiDepth = multiDepth + 1; 491 } else if (multiDepth < 1) { 492 dropdownWidth = dropdownWidth + element.outerWidth(); 493 } 494 }); 495 var menuRightPosition = windowWidth - (simpleDropdown.offset().left + simpleDropdown.outerWidth()); 496 if (dropdownWidth > menuRightPosition) { 497 if (element.find('.dropdown-menu').length > 0) { 498 var menuTopPosition = element.position().top, 499 submenuObj = element.find('.dropdown-menu'), 500 submenuHeight = submenuObj.outerHeight(), 501 totalHeight = menuTopPosition + submenuHeight + getHeaderHeight(), 502 windowHeight = getWindowHeight(); 503 if (totalHeight > windowHeight) { 504 submenuObj.css('top', '-' + (totalHeight - windowHeight) + 'px'); 505 } 506 } 507 element.addClass('menu-left'); 508 } 509 } 510 } 511 512 // Recalculate sticky kit 513 function stickyKitRecalc() { 514 if ($('.left-sidebar-wrapper').length) { 515 setTimeout(function () { 516 $('.left-sidebar-wrapper').trigger('sticky_kit:recalc'); 517 }, 500); 518 } 519 } 520 521 /* =================================== 522 Custom scrollbar 523 ====================================== */ 524 525 if (typeof $.fn.mCustomScrollbar === 'function') { 526 $('[data-scroll-options]').each(function () { 527 var _this = $(this); 528 var scrollOptions = _this.data('scroll-options') || '{"theme": "dark"}'; 529 530 try { 531 _this.mCustomScrollbar(scrollOptions); 532 } catch (error) { 533 console.error('Error parsing scroll options:', error); 534 } 535 }); 536 } 537 538 /* =================================== 539 Portfolio 540 ====================================== */ 541 542 // Portfolio isotope filter 543 if (typeof imagesLoaded === 'function') { 544 $('.portfolio-wrapper, .shop-wrapper').each(function () { 545 var _this = $(this); 546 _this.imagesLoaded(function () { 547 _this.removeClass('grid-loading'); 548 if (typeof $.fn.isotope === 'function') { 549 var _thisIsotop = _this.isotope({ 550 layoutMode: 'masonry', 551 itemSelector: '.grid-item', 552 percentPosition: true, 553 stagger: 0, 554 masonry: { 555 columnWidth: '.grid-sizer', 556 } 557 }); 558 } 559 isotopeObjs.push(_this); 560 561 // Filter default on load 562 if (typeof $.fn.isotope === 'function') { 563 var currentPortfolioActive = $('.portfolio-filter > li.active > a').attr('data-filter'); 564 if (currentPortfolioActive != '' && currentPortfolioActive != undefined) { 565 _this.isotope({filter: currentPortfolioActive}); 566 } 567 } 568 }); 569 570 _this.on('arrangeComplete', function () { 571 reInitSkrollr(); 572 }); 573 574 $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) { 575 _this.isotope({transitionDuration: 0}); 576 }); 577 }); 578 } 579 580 $(document).on('click', '.portfolio-filter > li > a', function () { 581 var _this = $(this), 582 parentSectionObj = _this.parents('section'); 583 parentSectionObj.find('.portfolio-filter > li').removeClass('active'); 584 _this.parent().addClass('active'); 585 var selector = _this.attr('data-filter'), 586 portfolioFilter = parentSectionObj.find('.portfolio-wrapper'); 587 588 portfolioFilter.find('.grid-item[data-anime]').addClass('appear'); 589 if (typeof portfolioFilter.isotope === 'function') { 590 portfolioFilter.isotope({filter: selector}); 591 } 592 593 if (parentSectionObj.length && $(parentSectionObj).hasClass('overlap-height')) { 594 setOverLayerPosition(); 595 } 596 597 return false;
598 }); 599 600 // Reset isotope loop 601 function resetIsotopeLayoutLoop(isotopeObjs, removeAnimation) { 602 for (var i = 0; i < isotopeObjs.length; i++) { 603 if (isotopeObjs[i].data('isotope')) { 604 isotopeObjs[i].isotope('layout'); 605 } 606 } 607 ; 608 } 609 610 // Horizontal portfolio 611 const ThreeDLetterMenuEffect = () => { 612 $(".threeD-letter-menu .menu-item").each(function () { 613 let _self = this, 614 MenuLink = _self.querySelector(".menu-item-text"), 615 MenuText = MenuLink.querySelector("span"), 616 imgHeight = _self.querySelector(".hover-reveal").clientHeight, 617 imgWidth = _self.querySelector(".hover-reveal").clientWidth, 618 windowHeight = window.innerHeight, 619 windowWidth = window.innerWidth; 620 621 MenuLink.innerHTML = `<span>${MenuText.innerHTML}</span><span class="clone">${MenuText.innerHTML}</span>` 622 623 MenuLink.querySelectorAll("span").forEach(function (item) { 624 item.setAttribute("data-splitting", true); 625 Splitting(); 626 }); 627 628 _self.addEventListener("mouseenter", function () { 629 anime({ 630 targets: _self.querySelector(".hover-reveal"), 631 opacity: [0, 1], 632 duration: 1000, 633 easing: "easeOutQuad" 634 }) 635 636 anime({ 637 targets: _self.querySelector(".hover-reveal__inner"), 638 scale: [0.5, 1], 639 easing: "easeOutQuad" 640 }) 641 642 anime({ 643 targets: _self.querySelector(".hover-reveal__img"), 644 scale: [2, 1], 645 easing: "easeOutQuad" 646 }) 647 }) 648 649 _self.addEventListener("mouseleave", function () { 650 anime({ 651 targets: _self.querySelector(".hover-reveal"), 652 opacity: 0, 653 duration: 1000, 654 easing: "easeOutQuad" 655 }) 656 657 anime({ 658 targets: _self.querySelector(".hover-reveal__inner"), 659 scale: [1, 0.5], 660 easing: "easeOutQuad" 661 }) 662 663 anime({ 664 targets: _self.querySelector(".hover-reveal__img"), 665 scale: [1, 2], 666 easing: "easeOutQuad" 667 }) 668 }) 669 670 if (typeof TweenLite !== "undefined") { 671 document.addEventListener("mousemove", function (e) { 672 let posX = e.clientX + 20, 673 posY = e.clientY + 20; 674 675 TweenLite.to(_self.querySelector(".hover-reveal"), .6, { 676 x: posX + imgWidth > windowWidth ? e.clientX - imgWidth : posX, 677 y: posY + imgHeight > windowHeight ? e.clientY - imgHeight : posY, 678 }) 679 }) 680 } 681 }); 682 } 683 ThreeDLetterMenuEffect(); 684 685 // Minimal portfolio 686 const sticky_container = document.querySelector(".sticky-image-distortion-wrapper"); 687 if (typeof (sticky_container) != 'undefined' && sticky_container != null) { 688 let winsize; 689 const calcWinsize = () => winsize = {width: window.innerWidth, height: window.innerHeight}; 690 calcWinsize(); 691 window.addEventListener('resize', calcWinsize); 692 693 class Menu { 694 constructor() { 695 this.DOM = { 696 menu: document.querySelector('.sticky-image-distortion-wrapper nav.menu') 697 }; 698 this.DOM.menuLinks = [...this.DOM.menu.querySelectorAll('.menu__link')]; 699 this.mousePos = {x: winsize.width / 2, y: winsize.height / 2}; 700 this.lastMousePos = { 701 translation: {x: winsize.width / 2, y: winsize.height / 2}, 702 displacement: {x: 0, y: 0} 703 }; 704 this.dmScale = 0; 705 this.current = -1; 706 this.initEvents(); 707 requestAnimationFrame(() => this.render()); 708 } 709 710 initEvents() { 711 document.body.style.setProperty('--body-bgcolor', this.DOM.menuLinks[0].getAttribute("data-bg")) 712 let active_item; 713 this.DOM.menuLinks.forEach((item, i) => { 714 let imgPath = item.getAttribute('data-img'); 715 let bgColor = item.getAttribute('data-bg'); 716 item.querySelector(".svg-wrapper").innerHTML = ` 717 <svg class="distort" width="960" height="980" viewBox="0 0 960 980"> 718 <filter id="distortionFilter${i}"> 719 <feTurbulence type="fractalNoise" baseFrequency="0.01 0.003" numOctaves="5" seed="2" stitchTiles="noStitch" x="0%" y="0%" width="100%" height="100%" result="noise"/> 720 <feDisplacementMap in="SourceGraphic" in2="noise" scale="0" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" filterUnits="userSpaceOnUse"/> 721 </filter>
722 <g filter="url(#distortionFilter${i})"> 723 <image class="distort__img" x="80" y="0" xlink:href="${imgPath}" height="980" width="960" /> 724 </g> 725 </svg> 726 ` 727 const displaceMentEl = [...item.querySelectorAll('feDisplacementMap')] 728 item.addEventListener('mouseenter', (e) => { 729 item.closest(".menu").childNodes.forEach(item => item.classList && item.classList.remove("active")) 730 item.classList.add("active"); 731 if (typeof TweenMax !== 'undefined' && typeof TweenMax !== null) { 732 if (item !== active_item) { 733 TweenMax.fromTo(displaceMentEl, 1.2, {attr: {scale: 50}}, {attr: {scale: 0.3}}); 734 } 735 } 736 document.body.style.setProperty('--body-bgcolor', bgColor) 737 active_item = item; 738 }); 739 740 item.addEventListener('mouseleave', (e) => { 741 active_item = item; 742 }) 743 }); 744 } 745 render() { 746 requestAnimationFrame(() => this.render()); 747 } 748 } 749 750 new Menu(); 751 } 752 753 /* =================================== 754 Blog 755 ====================================== */ 756 757 // Blog isotope filter 758 if (typeof imagesLoaded === 'function') { 759 $('.blog-wrapper').each(function () { 760 var _this = $(this); 761 _this.imagesLoaded(function () { 762 _this.removeClass('grid-loading'); 763 if (typeof $.fn.isotope === 'function') { 764 _this.isotope({ 765 layoutMode: 'masonry', 766 itemSelector: '.grid-item', 767 percentPosition: true, 768 stagger: 0, 769 masonry: { 770 columnWidth: '.grid-sizer', 771 } 772 }); 773 } 774 isotopeObjs.push(_this); 775 var currentBlogActive = $('.blog-filter > li.active > a').attr('data-filter'); 776 if (currentBlogActive != '' && currentBlogActive != undefined) { 777 _this.isotope({filter: currentBlogActive}); 778 } 779 }); 780 }); 781 } 782 783 $(document).on('click', '.blog-filter > li > a', function () { 784 var _this = $(this), 785 parentSectionObj = _this.parents('section'); 786 parentSectionObj.find('.blog-filter > li').removeClass('active'); 787 _this.parent().addClass('active'); 788 var selector = _this.attr('data-filter'), 789 blogFilter = parentSectionObj.find('.blog-wrapper'); 790 blogFilter.find('.grid-item[data-anime]').addClass('appear'); 791 blogFilter.isotope({filter: selector}); 792 return false; 793 }); 794 795 // blog hover box 796 $('.box-hover').on('mouseenter', function (e) { 797 $(this).find('.hover-text').slideDown(400); 798 }).on('mouseleave', function (e) { 799 $(this).find('.hover-text').slideUp(400); 800 }); 801 802 /* =================================== 803 Image gallery 804 ====================================== */ 805 806 // Image gallery isotope filter 807 if (typeof imagesLoaded === 'function') { 808 $('.gallery-wrapper').each(function () { 809 var _this = $(this); 810 _this.imagesLoaded(function () { 811 _this.removeClass('grid-loading'); 812 if (typeof $.fn.isotope === 'function') { 813 _this.isotope({ 814 layoutMode: 'masonry', 815 itemSelector: '.grid-item', 816 percentPosition: true, 817 stagger: 0, 818 masonry: { 819 columnWidth: '.grid-sizer', 820 } 821 }); 822 } 823 isotopeObjs.push(_this); 824 }); 825 }); 826 } 827 828 // Group gallery light box 829 if (typeof $.fn.magnificPopup === 'function') { 830 var lightboxgallerygroups = {}; 831 $('.portfolio-box [data-group], .gallery-box [data-group]').each(function () { 832 var id = $(this).attr('data-group'); 833 if (!lightboxgallerygroups[id]) { 834 lightboxgallerygroups[id] = []; 835 } 836 lightboxgallerygroups[id].push(this); 837 }); 838 $.each(lightboxgallerygroups, function () { 839 $(this).magnificPopup({ 840 type: 'image', 841 closeOnContentClick: true, 842 closeBtnInside: false, 843 gallery: {enabled: true} 844 }); 845 }); 846 } 847 848 /* =================================== 849 Justified gallery 850 ====================================== */ 851 if (typeof imagesLoaded === 'function') { 852 if ($('.justified-gallery').length) { 853 $('.justified-gallery').each(function () { 854 var _this = $(this), 855 justifiedOptions = _this.attr('data-justified-options') || '{ "rowHeight": 400, "maxRowHeight": false, "captions": true, "margins": 10, "waitThumbnailsLoad": true }'; 856 if (typeof $.fn.justifiedGallery !== 'undefined') { 857 if (typeof (justifiedOptions) !== 'undefined' && justifiedOptions !== null) { 858 _this.imagesLoaded(function () { 859 justifiedOptions = $.parseJSON(justifiedOptions); 860 _this.justifiedGallery(justifiedOptions); 861 }); 862 } 863 } 864 }); 865 } 866 } 867 868 /* =================================== 869 Accordion 870 ====================================== */ 871 872 $('.accordion').each(function () { 873 var _this = $(this), 874 activeIconClass = _this.attr('data-active-icon') || '', 875 inactiveIconClass = _this.attr('data-inactive-icon') || ''; 876 $('.collapse', this).on('show.bs.collapse', function () { 877 var id = $(this).attr('id'); 878 $('a[data-bs-target="#' + id + '"]').closest('.accordion-header').parent('.accordion-item').addClass('active-accordion'); 879 $('a[data-bs-target="#' + id + '"] i').addClass(activeIconClass).removeClass(inactiveIconClass); 880 }).on('hide.bs.collapse', function () { 881 var id = $(this).attr('id'); 882 $('a[data-bs-target="#' + id + '"]').closest('.accordion-header').parent('.accordion-item').removeClass('active-accordion'); 883 $('a[data-bs-target="#' + id + '"] i').addClass(inactiveIconClass).removeClass(activeIconClass); 884 }); 885 }); 886 887 // Accordion on checkout page 888 $('.checkout-accordion label input').on('click', function (e) { 889 var collapseId = $(this).parent().find('a').attr('href'); 890 if ($(this).prop("checked")) { 891 $(collapseId).collapse('show'); 892 } else { 893 $(collapseId).collapse('hide'); 894 } 895 }); 896 897 /* =================================== 898 Progress bar 899 ====================================== */ 900 901 if ($('.progress-bar').length) { 902 $(document).on('appear', '.progress-bar', function (e) { 903 if (!$(this).hasClass('appear')) { 904 $(this).addClass('appear'); 905 var total = $(this).attr('aria-valuenow'), delay
905= 300; 906 $(this).animate({'width': total + '%'}, { 907 duration: delay, 908 easing: "swing", 909 progress: function (animation, progress, msRemaining) { 910 var counter = parseInt(total * progress); 911 $(this).find('span').html(counter + '%'); 912 } 913 }); 914 } 915 }); 916 } 917 918 $('[data-tab="review-tab"]').on('shown.bs.tab', function (e) { 919 $('.progress-bar').each(function () { 920 $(this).appear().trigger('resize'); 921 }); 922 }); 923 924 /* =================================== 925 Pie charts 926 ====================================== */ 927 928 // Pie charts style 01 929 if ($('.pie-chart-style-01').length) { 930 if (typeof $.fn.easyPieChart === 'function') { 931 var color1, color2; 932 $(document.body).on('appear', '.pie-chart-style-01', function (e) { 933 $('.pie-chart-style-01').easyPieChart({ 934 trackColor: '#232323', 935 scaleColor: "", 936 lineCap: 'round', 937 lineWidth: 10, 938 size: 180, 939 barColor: function () { 940 color1 = $(this.el).attr('data-start-color') || $(this.el).attr('data-bar-color') || "#000"; 941 color2 = $(this.el).attr('data-end-color') || $(this.el).attr('data-bar-color') || "#000"; 942 var ctx = this.renderer.getCtx(); 943 var canvas = this.renderer.getCanvas(); 944 var gradient = ctx.createLinearGradient(0, 0, canvas.width, 270); 945 gradient.addColorStop(0.2, color1); 946 gradient.addColorStop(0, color2); 947 return gradient; 948 }, 949 animate: { 950 duration: 2000, 951 enabled: true 952 }, 953 onStep: function (from, to, percent) { 954 $(this.el).find('.percent').text(Math.round(percent) + '%'); 955 } 956 }); 957 }); 958 } 959 } 960 961 /* =================================== 962 Mousetip on mouse move 963 ====================================== */ 964 965 if (!isMobile) { 966 $(document).on('mousemove', '.mousetip-wrapper', function (e) { 967 var mouseX = e.pageX - $(this).offset().left + 20; 968 var mouseY = e.pageY - $(this).offset().top + 20; 969 $(this).find('.caption').show().css({ 970 top: mouseY, left: mouseX 971 }); 972 }); 973 } 974 975 /* =================================== 976 Counter 977 ====================================== */ 978 979 // Vertical counter 980 $('.vertical-counter').each(function () { 981 var _this = $(this), 982 counterValue = _this.attr('data-to'), 983 individualValue = counterValue.toString().split(''), 984 valueLength = counterValue.length; 985 986 // Adding the div.vertical-counter-number in div.counter multiple(valueLength) times 987 for (var i = 0; i < valueLength; i++) { 988 _this.append('<span class="vertical-counter-number"><ul><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></span>'); 989 } 990 991 // Adding the individual data-to in each div.vertical-counter-number 992 _this.find('.vertical-counter-number').each(function (index) { 993 $(this).attr('data-to', individualValue[index]); 994 }); 995 }); 996 997 // Vertical counter on jQuery appear 998 if ($('.vertical-counter').length) { 999 1000 function calculateHeight() { 1001 $('.vertical-counter').each(function () { 1002 var _this = $(this), 1003 divHeight = _this.find('.vertical-counter-number').find('li').height(); 1004 1005 $(this).height(divHeight); 1006 }); 1007 } 1008 1009 calculateHeight(); 1010 1011 $(window).resize(function () { 1012 calculateHeight(); 1013 }) 1014 1015 $(document).on('appear', '.vertical-counter', function (e) { 1016 if (!$(this).hasClass('appear')) { 1017 $(this).addClass('appear'); 1018 1019 if ($(window).scrollTop() + getWindowHeight() >= $('.vertical-counter').offset().top) { 1020 $(this).find('.vertical-counter-number').each(function () { 1021 var _this = $(this), 1022 value = _this.attr('data-to'); 1023 if (value <= 9) { 1024 anime({ 1025 targets: this.querySelector('ul'), 1026 translateY: [0, `${-value * 10}%`], 1027 duration: 2000,
1028 easing: 'easeOutCubic' 1029 }); 1030 } 1031 }); 1032 } 1033 } 1034 }); 1035 $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) { 1036 let activeTabPane = $(`${$(this).attr('href')}`); 1037 1038 activeTabPane.find('.vertical-counter').each(function () { 1039 var _this = $(this), 1040 value = _this.attr('data-to'), 1041 divHeight = _this.find('li').height(); 1042 _this.height(divHeight); 1043 1044 if (value <= 9) { 1045 _this.find('ul').css({'transform': 'translateY(-' + value * 10 + '%)'}); 1046 } 1047 }); 1048 }); 1049 } 1050 1051 $('[data-tab="counter"]').on('shown.bs.tab', function (e) { 1052 $('.vertical-counter').each(function () { 1053 $(this).appear().trigger('resize'); 1054 }); 1055 }); 1056 1057 // Counter number reset on jQuery appear 1058 if (typeof $.fn.countTo === 'function' && $('.counter').length) { 1059 $(document).on('appear', '.counter', function (e) { 1060 var _this = $(this); 1061 if (!_this.hasClass('appear')) { 1062 var options = _this.data('countToOptions') || {}; 1063 _this.countTo(options); 1064 _this.addClass('appear'); 1065 } 1066 }); 1067 } 1068 1069 // Counter 1070 function animateCounters() { 1071 $('.counter').each(function (options) { 1072 var _this = $(this); 1073 options = $.extend({}, options || {}, _this.data('countToOptions') || {}); 1074 if (typeof $.fn.countTo === 'function') { 1075 _this.countTo(options); 1076 } 1077 }); 1078 } 1079 1080 /* =================================== 1081 Sliding box 1082 ====================================== */ 1083 1084 function slideboxstyle() { 1085 $('.sliding-box').each(function (index, value) { 1086 var valueObj = $(value), 1087 totalWidth = valueObj.outerWidth(), 1088 slidingLength = valueObj.find('.sliding-box-item').length, 1089 devideRightPadding = parseInt(valueObj.css('padding-right')) / slidingLength, 1090 devideLeftPadding = parseInt(valueObj.css('padding-left')) / slidingLength, 1091 usageWidth = (slidingLength * 30) + 30 + devideRightPadding + devideLeftPadding, 1092 useWidth = totalWidth - usageWidth, 1093 devideLength = slidingLength + 1, 1094 devideWidth = (useWidth / devideLength), 1095 activeWidth = devideWidth * 2; 1096 1097 valueObj.find('.sliding-box-item, .sliding-box-img, .sliding-box-item .sliding-box-content').css('width', devideWidth); 1098 valueObj.find('.sliding-box-item .sliding-box-content').css('left', devideWidth); 1099 valueObj.find('.sliding-box-item.active').css('width', activeWidth); 1100 1101 $(document).on('mouseenter', '.sliding-box .sliding-box-item', function () { 1102 $(this).siblings().removeClass('active'); 1103 $(this).addClass('active'); 1104 valueObj.find('.sliding-box-item, .sliding-box-img, .sliding-box-item .sliding-box-content').css('width', devideWidth); 1105 valueObj.find('.sliding-box-item .sliding-box-content').css('left', devideWidth); 1106 valueObj.find('.sliding-box-item.active').css('width', activeWidth); 1107 }); 1108 }); 1109 } 1110 1111 /* =================================== 1112 Team 1113 ====================================== */ 1114 1115 // Team style 01 1116 function setSpaceInTeamStyle() { 1117 $('.team-style-01').each(function () { 1118 let _this = $(this), 1119 figure = _this.find('figure'), 1120 figcaption = _this.find('figcaption'); 1121 1122 setTimeout(function () { 1123 figure.css({'padding-bottom': figcaption.outerHeight()}); 1124 }, 200); 1125 }); 1126 } 1127 1128 /* =================================== 1129 Interactive banner 1130 ====================================== */ 1131 1132 // Interactive banner style 02 1133 function setSpaceInInteractiveBannerStyle() { 1134 $('.interactive-banner-style-02').each(function () { 1135 let _this = $(this), 1136 figure = _this.find('figure'), 1137 figcaption = _this.find('figcaption'); 1138 1139 setTimeout(function () { 1140 figure.css({'padding-bottom': figcaption.outerHeight()}); 1141 }, 500); 1142 }); 1143 } 1144 1145 /* =================================== 1146 Video 1147 ====================================== */ 1148 1149 // Video player in background 1150 $(document).on('click', '.html-video-play', function () { 1151 var $videoBg = $(this).parents('section').find('.video-bg'); 1152 if ($(this).is('[playing]') === false) { 1153 $videoBg.trigger('play'); 1154 $(this).attr('playing', 'true'); 1155 $(this).parents('section').find('.video-play-icon').addClass('remove-play-icon'); 1156 } else { 1157 1158 $videoBg.trigger('pause'); 1159 $(this).removeAttr('playing'); 1160 $(this).parents('section').find('.video-play-icon').removeClass('remove-play-icon'); 1161 } 1162 }); 1163 1164 // Fit video 1165 if (typeof $.fn.fitVids === 'function') { 1166 $('.fit-videos').fitVids(); 1167 } 1168 1169 /* =================================== 1170 Countdown timer 1171 ====================================== */ 1172 1173 if ($.fn.countdown !== undefined && $.fn.countdown !== null) { 1174 $('.countdown').each(function () { 1175 var _this = $(this); 1176 _this.countdown(_this.attr("data-enddate")).on('update.countdown', function (event) { 1177 _this.html(event.strftime('' + '<div class="counter-container"><div class="countdown-box first"><div class="number">%-D</div><span>Days</span></div>' + '<div class="countdown-box"><div class="number">%H</div><span>Hours</span></div>' + '<div class="countdown-box"><div class="number">%M</div><span>Minutes</span></div>' + '<div class="countdown-box last"><div class="number">%S</div><span>Seconds</span></div></div>')); 1178 }).on('finish.countdown', function (event) { 1179 _this.html(event.strftime('' + '<div class="counter-container"><div class="countdown-box first" data-number="00"><div class="number">00</div><span>Days</span></div>' + '<div class="countdown-box"><div class="number">00</div><span>Hours</span></div>' + '<div class="countdown-box"><div class="number">00</div><span>Minutes</span></div>' + '<div class="countdown-box last"><div class="number">00</div><span>Seconds</span></div></div>')); 1180 }); 1181 }); 1182 } 1183 1184 /* =================================== 1185 Anime - animation library 1186 ====================================== */ 1187 1188 // Anime animation 1189 function animeAnimation(target, options) { 1190 let child = target; 1191 let staggerValue = options.staggervalue || 0; 1192 let delay = options.delay || 0; 1193 let anime_animation = anime.timeline(); 1194 1195 function applyTransitionStyles(elements) { 1196 for (let i = 0; i < elements.length; i++) { 1197 const element = elements[i];
1198 element.style.transition = 'none'; 1199 if (options.willchange) { 1200 element.style.willChange = 'transform'; 1201 } 1202 } 1203 } 1204 1205 if (options.el === "childs") { 1206 child = target.children; 1207 applyTransitionStyles(target.children); 1208 } 1209 1210 if (options.el === "lines") { 1211 function lineSplitting() { 1212 const lines = Splitting({target: target, by: 'lines'}); 1213 const line = lines[0].lines.map(item => item.map(i => i.innerHTML).join(" ")); 1214 target.innerHTML = line.map(item => `<span class="d-inline-flex">${item}</span>`).join(' '); 1215 } 1216 lineSplitting(); 1217 applyTransitionStyles(target.children); 1218 child = target.children; 1219 } 1220 1221 if (options.el === "words") { 1222 function lineSplitting() { 1223 const words = Splitting({target: target, by: 'words'}); 1224 const word = words[0].words.join(" "); 1225 } 1226 lineSplitting(); 1227 applyTransitionStyles(target.children); 1228 child = target.children; 1229 } 1230 1231 if (options.perspective) { 1232 target.style.perspective = `${options.perspective}px`; 1233 } 1234 1235 if (options.willchange) { 1236 target.style.willChange = options.willchange; 1237 } 1238 1239 anime_animation.add({ 1240 targets: child, 1241 ...options, 1242 delay: anime.stagger(staggerValue, {start: delay}), 1243 complete: function () { 1244 if (options.el) { 1245 target.classList.add('anime-child'); 1246 target.classList.add('anime-complete'); 1247 1248 for (let i = 0; i < target.children.length; i++) { 1249 const element = target.children[i]; 1250 element.style.removeProperty('opacity'); 1251 element.style.removeProperty('transform'); 1252 element.style.removeProperty('transition'); 1253 1254 if (target.classList.contains('grid')) { 1255 element.style.transition = 'none'; 1256 } 1257 } 1258 1259 if (options.el === "lines") { 1260 for (let i = 0; i < target.children.length; i++) { 1261 const element = target.children[i]; 1262 element.classList.remove('d-inline-flex'); 1263 element.classList.add('d-inline'); 1264 element.style.willChange = "inherit"; 1265 } 1266 } 1267 } else { 1268 target.classList.add('anime-complete'); 1269 target.style.removeProperty('opacity'); 1270 target.style.removeProperty('transform'); 1271 target.style.removeProperty('transition'); 1272 } 1273 } 1274 }); 1275 } 1276 1277 const $dataAnimeElements = $('[data-anime]:not(.swiper [data-anime])'); 1278 $dataAnimeElements.each(function () { 1279 const $self = $(this); 1280 const animeOptions = $self.data('anime'); 1281 1282 if (animeOptions && getWindowWidth() > animeBreakPoint) { 1283 try { 1284 const effect = animeOptions.effect && animeOptions.effect.toLowerCase(); 1285 1286 $self.on('appear', function () { 1287 if (!$self.hasClass('appear')) { 1288 $self.addClass('appear'); 1289 1290 if (effect === 'slide') { 1291 slideAnimation(this, animeOptions); 1292 } else { 1293 animeAnimation(this, animeOptions); 1294 } 1295 } 1296 1297 if ($self.hasClass('grid')) { 1298 $self.find('.grid-sizer').removeAttr('style'); 1299 } 1300 }); 1301 } catch (error) { 1302 console.error('Error parsing anime options:', error); 1303 } 1304 } else { 1305 $self.removeAttr('data-anime'); 1306 $("body").addClass("no-animation"); 1307 } 1308 }); 1309 1310 // Anime text revealer js 1311 const slideAnimation = (target, options) => { 1312 let duration = options.speed ? options.speed : 100, 1313 direction = options.direction ? options.direction : "lr",
1314 delay = options.delay ? options.delay : 0; 1315 1316 target.style.position = 'relative'; 1317 1318 // Create slide panel div 1319 let tmp = document.createElement('div'); 1320 tmp.style.width = tmp.style.height = '100%'; 1321 tmp.style.top = tmp.style.left = 0; 1322 tmp.style.background = options.color ? options.color : '#fff'; 1323 tmp.style.position = 'absolute'; 1324 1325 if (direction === 'lr') { 1326 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 50%'; 1327 tmp.style.WebkitTransform = tmp.style.transform = 'scaleX(0)'; 1328 } else if (direction === 'tb') { 1329 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '50% 0%'; 1330 tmp.style.WebkitTransform = tmp.style.transform = 'scaleY(0)'; 1331 } else if (direction === 'bt') { 1332 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 100%'; 1333 tmp.style.WebkitTransform = tmp.style.transform = 'scaleY(0)'; 1334 } else { 1335 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 50%'; 1336 tmp.style.WebkitTransform = tmp.style.transform = 'scaleX(0)'; 1337 } 1338 target.appendChild(tmp); 1339 1340 // init Anime js. 1341 let slide_anime = anime.timeline(); 1342 slide_anime.add({ 1343 targets: tmp, 1344 scaleX: (direction === 'lr' || direction === 'rl') ? [0, 1] : [1, 1], 1345 scaleY: (direction === 'tb' || direction === 'bt') ? [0, 1] : [1, 1], 1346 duration: duration + 500, 1347 easing: 'easeInOutCubic', 1348 delay: delay, 1349 complete: function () { 1350 if (direction === 'lr') { 1351 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 50%'; 1352 } else if (direction === 'tb') { 1353 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '50% 100%'; 1354 } else if (direction === 'bt') { 1355 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 0%'; 1356 } else { 1357 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 50%'; 1358 } 1359 1360 anime({ 1361 targets: tmp, 1362 duration: duration + 500, 1363 easing: 'easeInOutCubic', 1364 scaleX: (direction === 'lr' || direction === 'rl') ? [1, 0] : [1, 1], 1365 scaleY: (direction === 'tb' || direction === 'bt') ? [1, 0] : [1, 1], 1366 complete: function () { 1367 target.removeChild(tmp); 1368 if (typeof callback === 'function') { 1369 callback(); 1370 } 1371 } 1372 }); 1373 } 1374 }).add({ 1375 targets: target.querySelector('*'), 1376 easing: 'easeOutQuint', 1377 delay: direction === 'lr' ? anime.stagger(duration, {start: 1000}) : anime.stagger(-duration, {start: 1000}), 1378 opacity: [0, 1] 1379 }, "-=900"); 1380 } 1381 1382 /* =================================== 1383 Fancy text animation 1384 ====================================== */ 1385 1386 // Curved text effect 1387 const curvedTextAnimation = (target, options) => { 1388 let duration = options.duration ? (options.duration <= 2000 ? 2000 : options.duration) : 2000, 1389 content = options.string, 1390 curveText = anime.timeline(); 1391 1392 const lineEq = (y2, y1, x2, x1, currentVal) => { 1393 var m = (y2 - y1) / (x2 - x1), 1394 b = y1 - m * x1; 1395 return m * currentVal + b; 1396 } 1397 1398 curveText.add({ 1399 targets: target.querySelectorAll('.anime-text > .word > .char'), 1400 duration: 800, 1401 easing: 'easeOutElastic', 1402 opacity: 1, 1403 translateY: function (el, index) { 1404 var p = el.parentNode, 1405 lastElOffW = p.lastElementChild.offsetWidth, 1406 firstElOffL = p.firstElementChild.offsetLeft, 1407 w = p.offsetWidth - lastElOffW - firstElOffL - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft), 1408 tyVal = lineEq(0, 100, firstElOffL + w / 2, firstElOffL, el.offsetLeft); 1409 return [Math.abs(tyVal) + '%', '0%']; 1410 }, 1411 rotateZ: function (el, index) { 1412 var p = el.parentNode, 1413 lastElOffW = p.lastElementChild.offsetWidth, 1414 firstElOffL = p.firstElementChild.offsetLeft, 1415 w = p.offsetWidth - lastElOffW - p.firstElementChild.offsetLeft - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft), 1416 rz = lineEq(90, -90, firstElOffL + w, firstElOffL, el.offsetLeft); 1417 return [rz, 0]; 1418 } 1419 }).add({ 1420 targets: target.querySelectorAll('.anime-text > .word > .char'), 1421 duration: 1000, 1422 easing: 'easeInExpo', 1423 opacity: content.length > 1 ? 0 : 1, 1424 translateY: function (el, index) { 1425 var p = el.parentNode, 1426 lastElOffW = p.lastElementChild.offsetWidth, 1427 firstElOffL = p.firstElementChild.offsetLeft, 1428 w = p.offsetWidth - lastElOffW - firstElOffL - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft), 1429 tyVal = lineEq(0, 100, firstElOffL + w / 2, firstElOffL, el.offsetLeft); 1430 return content.length > 1 ? [-Math.abs(tyVal) + '%'] : [Math.abs(tyVal) + '%', '0%']; 1431 }, 1432 rotateZ: function (el, index) { 1433 var p = el.parentNode, 1434 lastElOffW = p.lastElementChild.offsetWidth, 1435 firstElOffL = p.firstElementChild.offsetLeft, 1436 w = p.offsetWidth - lastElOffW - p.firstElementChild.offsetLeft - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft), 1437 rz = lineEq(-90, 90, firstElOffL + w, firstElOffL, el.offsetLeft); 1438 return content.length > 1 ? [rz] : [rz, 0]; 1439 } 1440 }, duration - 1500); 1441 } 1442 1443 // Slide text effect 1444 const slideTextAnimation = (target, options) => { 1445 let current_anime_text = target.querySelectorAll('.anime-text')[0], 1446 speed = options.speed ? options.speed : 100; 1447 1448 current_anime_text.style.position = 'relative'; 1449 1450 // Create slide panel div 1451 let tmp = document.createElement('div'); 1452 tmp.style.width = tmp.style.height = '100%'; 1453 tmp.style.top = tmp.style.left = 0; 1454 tmp.style.background = options.color ? options.color : '#fff'; 1455 tmp.style.position = 'absolute'; 1456 tmp.style.WebkitTransform = tmp.style.transform = 'scaleX(0)'; 1457 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 50%'; 1458 1459 if (options.direction === 'left') { 1460 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 50%'; 1461 } 1462 current_anime_text.appendChild(tmp); 1463 1464 // init Anime js. 1465 let slide_anime = anime.timeline(); 1466 slide_anime.add({ 1467 targets: current_anime_text.querySelectorAll('div'), 1468 scaleX: [0, 1], 1469 duration: speed + 500, 1470 easing: 'easeInOutCubic', 1471 complete: function () { 1472 if (options.direction === 'left') { 1473 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 50%'; 1474 } else { 1475 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 50%'; 1476 } 1477 1478 anime({ 1479 targets: tmp, 1480 duration: speed + 500, 1481 easing: 'easeInOutCubic', 1482 scaleX: [1, 0], 1483 complete: function () { 1484 current_anime_text.removeChild(tmp); 1485 if (typeof callback === 'function') { 1486 callback(); 1487 } 1488 } 1489 }); 1490 } 1491 }).add({ 1492 targets: target.querySelectorAll('.anime-text > .word > .char'), 1493 easing: 'easeOutQuint', 1494 delay: options.direction === 'left' ? anime.stagger(speed, {start: 1000}) : anime.stagger(-speed, {start: 1000}), 1495 opacity: [0, 1], 1496 translateX: options.direction === 'left' ? [100, 0] : [-100, 0] 1497 }, "-=600"); 1498 } 1499 1500 // Wave text effect 1501 const waveTextAnimation = (target, options) => { 1502 let duration = options.duration ? options.duration : 3000, 1503 direction = options.direction, 1504 content = options.string, 1505 speed = options.speed, 1506 waveText = anime.timeline(); 1507 1508 waveText.add({ 1509 targets: target.querySelectorAll('.anime-text > .word > .char'), 1510 opacity: [0, 1], 1511 translateY: direction === 'down' ? [-20, 0] : [20, 0], 1512 delay: anime.stagger(speed ? speed : 50) 1513 }).add({ 1514 targets: target.querySelectorAll('.anime-text .word .char'), 1515 opacity: content.length > 1 ? [1, 0] : [1, 1], 1516 translateY: content.length > 1 ? (direction === 'down' ? [0, 20] : [0, -20]) : [0, 0], 1517 delay: anime.stagger(speed ? speed : 50, {start: duration - 1500}) 1518 }); 1519 } 1520 1521 // Smooth wave text effect 1522 const smoothWaveTextAnimation = (target, options) => { 1523 let duration = options.duration ? options.duration : 3000, 1524 direction = options.direction, 1525 content = options.string, 1526 speed = options.speed, 1527 smoothWaveText = anime.timeline(); 1528 1529 smoothWaveText.add({ 1530 targets: target.querySelectorAll('.anime-text > .word > .char'), 1531 opacity: [0, 1], 1532 translateY: direction === 'down' ? [-50, 0] : [50, 0], 1533 duration: 500, 1534 easing: 'easeOutQuad', 1535 delay: anime.stagger(speed ? speed : 40, {direction: 'reverse'}), 1536 }).add({ 1537 targets: target.querySelectorAll('.anime-text .word .char'), 1538 opacity: content.length > 1 ? [1, 0] : [1, 1], 1539 translateY: content.length > 1 ? (direction === 'down' ? 50 : -50) : 0, 1540 duration: 500, 1541 easing: 'easeOutQuad', 1542 delay: anime.stagger(speed ? speed : 40, {start: duration - 1000, direction: 'reverse'}) 1543 }); 1544 } 1545 1546 // Rotate text effect 1547 const rotateTextAnimation = (target, options) => { 1548 let duration = options.duration ? options.duration : 3000, 1549 content = options.string, 1550 speed = options.speed, 1551 rotateText = anime.timeline(); 1552 1553 rotateText.add({ 1554 targets: target.querySelectorAll('.anime-text > .word > .char'), 1555 opacity: [0, 1], 1556 rotateX: [-70, 0], 1557 duration: 150, 1558 delay: anime.stagger(speed ? speed : 50), 1559 easing: "linear" 1560 }).add({ 1561 targets: target.querySelectorAll('.anime-text > .word > .char'), 1562 opacity: content.length > 1 ? 0 : 1, 1563 rotateX: content.length > 1 ? [0, 70] : [0, 0], 1564 duration: 150, 1565 delay: anime.stagger(speed ? speed : 50, {start: duration - 1500}), 1566 easing: "linear" 1567 }); 1568 } 1569 1570 // Jump text effect 1571 const jumpTextAnimation = (target, options) => { 1572 let duration = options.duration ? options.duration : 3000, 1573 content = options.string, 1574 speed = options.speed,
1575 delay = options.delay, 1576 movingLetter9 = anime.timeline(); 1577 1578 movingLetter9.add({ 1579 targets: target.querySelectorAll('.anime-text > .word > .char'), 1580 scale: [0, 1], 1581 duration: 1500, 1582 elasticity: 600, 1583 transformOrigin: '50% 100%', 1584 delay: anime.stagger(speed ? speed : 45, {start: delay}) 1585 }).add({ 1586 targets: target.querySelectorAll('.anime-text > .word > .char'), 1587 opacity: content.length > 1 ? 0 : 1, 1588 scale: content.length > 1 ? 0 : 1, 1589 duration: 500, 1590 easing: "easeOutExpo", 1591 delay: anime.stagger(speed ? speed : 45) 1592 }, `+=${duration - 2300}`); 1593 } 1594 1595 // Zoom text effect 1596 const zoomTextAnimation = (target, options) => { 1597 let duration = options.duration ? options.duration : 3000, 1598 content = options.string, 1599 speed = options.speed, 1600 movingLetter2 = anime.timeline(); 1601 1602 movingLetter2.add({ 1603 targets: target.querySelectorAll('.anime-text > .word > .char'), 1604 scale: [4, 1], 1605 opacity: [0, 1], 1606 translateZ: 0, 1607 easing: "easeOutExpo", 1608 duration: 950, 1609 delay: anime.stagger(speed ? speed : 70) 1610 }).add({ 1611 targets: target.querySelectorAll('.anime-text > .word'), 1612 opacity: content.length > 1 ? 0 : 1, 1613 duration: 1000, 1614 easing: "easeOutExpo", 1615 delay: 1000 1616 }, `+=${duration - 2500}`); 1617 } 1618 1619 // Rubber band text effect 1620 const rubberbandTextAnimation = (target, options) => { 1621 let duration = options.duration ? options.duration : 3000, 1622 content = options.string, 1623 speed = options.speed, 1624 direction = options.direction, 1625 rubberband = anime.timeline(); 1626 1627 rubberband.add({ 1628 targets: target.querySelectorAll('.anime-text > .word > .char'), 1629 translateX: direction === "right" ? [-40, 0] : [40, 0], 1630 translateZ: 0, 1631 opacity: [0, 1], 1632 easing: "easeOutExpo", 1633 duration: 1200, 1634 delay: anime.stagger(speed ? speed : 75, {direction: direction === "right" ? 'reverse' : 'normal'}) 1635 }).add({ 1636 targets: target.querySelectorAll('.anime-text > .word > .char'), 1637 translateX: content.length > 1 ? (direction === "left" ? -40 : 40) : 0, 1638 opacity: content.length > 1 ? 0 : 1, 1639 easing: "easeInExpo", 1640 duration: 500, 1641 delay: anime.stagger(speed ? speed : 75, {start: duration - 2500, direction: direction === "right" ? 'reverse' : 'normal'}) 1642 }); 1643 } 1644 1645 // Fade text effect 1646 const fadeTextAnimation = (target, options) => { 1647 let duration = options.duration ? options.duration : 3000, 1648 content = options.string, 1649 speed = options.speed, 1650 fade = anime.timeline(); 1651 1652 fade.add({ 1653 targets: target.querySelectorAll('.anime-text > .word > .char'), 1654 translateY: [100, 0], 1655 translateZ: 0, 1656 opacity: [0, 1], 1657 easing: "easeOutExpo", 1658 delay: anime.stagger(speed ? speed : 30) 1659 }).add({ 1660 targets: target.querySelectorAll('.anime-text > .word > .char'), 1661 translateY: content.length > 1 ? [0, -100] : [0, 0], 1662 opacity: content.length > 1 ? [1, 0] : [1, 1], 1663 easing: "easeInExpo", 1664 delay: anime.stagger(speed ? speed : 40, {start: duration - 3000}) 1665 }); 1666 } 1667 1668 // Fancy text 1669 function FancyTextDefault(item, ftOptions) { 1670 let text_effect = ftOptions.effect, 1671 duration = ftOptions.duration ? ftOptions.duration : 3000, 1672 content = ftOptions.string, 1673 speed = ftOptions.speed, 1674 delay = ftOptions.delay; 1675 1676 if (content) { 1677 item.innerHTML = `<span class="anime-text">${content[0]}</span>`; 1678 item.querySelector('.anime-text').setAttribute('data-splitting', true); 1679 Splitting(); 1680 1681 if (getWindowWidth() > animeBreakPoint) { 1682 switch (text_effect) { 1683 case 'wave': 1684 waveTextAnimation(item, ftOptions); 1685 break; 1686 1687 case 'smooth-wave': 1688 smoothWaveTextAnimation(item, ftOptions); 1689 break; 1690 1691 case 'curve': 1692 curvedTextAnimation(item, ftOptions); 1693 break; 1694 1695 case 'rotate': 1696 rotateTextAnimation(item, ftOptions); 1697 break; 1698 1699 case 'slide': 1700 slideTextAnimation(item, ftOptions); 1701 break; 1702 1703 case 'jump': 1704 jumpTextAnimation(item, ftOptions); 1705 break; 1706 1707 case 'zoom': 1708 zoomTextAnimation(item, ftOptions); 1709 break; 1710 1711 case 'rubber-band': 1712 rubberbandTextAnimation(item, ftOptions); 1713 break; 1714 1715 case 'fade': 1716 fadeTextAnimation(item, ftOptions); 1717 break; 1718 1719 default: 1720 } 1721 1722 if (text_effect === undefined) { 1723 anime({ 1724 targets: item.querySelectorAll('.anime-text > .word > .char'), 1725 ...ftOptions, 1726 delay: anime.stagger(speed ? speed : 0, {start: delay ? delay : 0}) 1727 }) 1728 } 1729 } 1730 1731 if (content.length > 1) { 1732 let counter = 1; 1733 setInterval(function () { 1734 let new_el = document.createElement('span'); 1735 new_el.classList.add('anime-text'); 1736 new_el.innerHTML = content[counter]; 1737 new_el.setAttribute('data-splitting', true); 1738 1739 item.querySelector('.anime-text').replaceWith(new_el); 1740 Splitting(); 1741 counter++; 1742 1743 if (counter === content.length) { 1744 counter = 0; 1745 } 1746 1747 switch (text_effect) { 1748 case 'wave': 1749 waveTextAnimation(item, ftOptions); 1750 break; 1751 1752 case 'smooth-wave': 1753 smoothWaveTextAnimation(item, ftOptions); 1754 break; 1755 1756 case 'curve': 1757 curvedTextAnimation(item, ftOptions); 1758 break; 1759 1760 case 'rotate': 1761 rotateTextAnimation(item, ftOptions); 1762 break; 1763 1764 case 'slide': 1765 slideTextAnimation(item, ftOptions); 1766 break; 1767 1768 case 'jump': 1769 jumpTextAnimation(item, ftOptions); 1770 break; 1771 1772 case 'zoom': 1773 zoomTextAnimation(item, ftOptions); 1774 break; 1775 1776 case 'rubber-band': 1777 rubberbandTextAnimation(item, ftOptions); 1778 break; 1779 1780 case 'fade': 1781 fadeTextAnimation(item, ftOptions); 1782 break; 1783 1784 default: 1785 } 1786 1787 if (text_effect === undefined) { 1788 anime({ 1789 targets: item.querySelectorAll('.anime-text > .word > .char'), 1790 ...ftOptions, 1791 delay: anime.stagger(speed ? speed : 0, {start: delay ? delay : 0}) 1792 }); 1793 } 1794 }, duration); 1795 } 1796 } 1797 } 1798 1799 $('[data-fancy-text]').each(function () { 1800 const _this = $(this); 1801 const ftOptions = _this.data('fancy-text'); 1802 if (ftOptions) { 1803 if (_this.hasClass('swiper-parallax-fancy-text')) { 1804 FancyTextDefault(this, ftOptions); 1805 } else { 1806 _this.on('appear', function () { 1807 if (!_this.hasClass('appear')) { 1808 _this.addClass('appear'); 1809 FancyTextDefault(this, ftOptions); 1810 } 1811 }); 1812 } 1813 } 1814 }); 1815 1816 /* =================================== 1817 Instagram feed 1818 ====================================== */ 1819 var instagramWrapperItems = document.querySelectorAll('.instafeed-wrapper');
1820 instagramWrapperItems.forEach(function (instagramWrapperItem) { 1821 var token = 'IGQWRPZA29XcnJtQ3lydUp4dHNvX0cwX1pSMzRlMm5sOGJ0bXpPS3h5dEVIN2ozQVkwb0VGMVNMNlh4eVBVUVN5WnBVR2tVeGdnbER5dWhJUUxCZAGo1TXBuRkxmcWU2dW9fYkJDaVRSM0RCNlFQUTZAmOFJKOUJsTnMZD', 1822 _this = $(instagramWrapperItem), 1823 token = _this.attr('data-token') || token, 1824 total = _this.attr('data-total') || '6', // how much photos do you want to get 1825 slider = _this.attr('data-slider-options'), 1826 _html = _this.html(), 1827 outputHTML = ''; 1828 if (typeof (slider) !== 'undefined' && slider !== null) { 1829 _this.html(''); 1830 } 1831 $.ajax({ 1832 url: 'https://graph.instagram.com/me/media?fields=id,media_type,media_url,timestamp,permalink&access_token=' + token, 1833 type: 'GET', 1834 success: function (response) { 1835 outputHTML += _this.find('.grid-item').length ? '<li class="grid-sizer"></li>' : ''; 1836 for (var x in response.data) { 1837 if (x < parseInt(total)) { 1838 if (response.data[x]['media_type'] == 'IMAGE') { 1839 var link = response.data[x]['permalink'] || '', 1840 image = response.data[x]['media_url'] || '', 1841 likes = response.data[x]['like_count'] || '', 1842 comments = response.data[x]['comments_count'] || '', 1843 output = _html; 1844 1845 output = output.replace(' href="#"', ''); 1846 output = output.replace(' src="#"', ''); 1847 output = output.replace('data-href', 'href'); 1848 output = output.replace('data-src', 'src'); 1849 output = output.replace('{{link}}', link); 1850 output = output.replace('{{image}}', image); 1851 output = output.replace('{{likes}}', likes); 1852 output = output.replace('{{comments}}', comments); 1853 outputHTML += output; 1854 } 1855 } 1856 } 1857 _this.html(outputHTML); 1858 if (typeof (slider) !== 'undefined' && slider !== null) { 1859 // Apply swiper 1860 var sliderOptions = $.parseJSON(slider); 1861 var swiperObj = instagramWrapperItem.parentElement; 1862 if (typeof Swiper === 'function') { 1863 new Swiper(swiperObj, sliderOptions); 1864 } 1865 } else { 1866 // Apply isotope 1867 _this.imagesLoaded(function () { 1868 _this.removeClass('grid-loading'); 1869 if (typeof $.fn.isotope === 'function') { 1870 _this.isotope({ 1871 layoutMode: 'masonry', 1872 itemSelector: '.grid-item', 1873 percentPosition: true, 1874 stagger: 0, 1875 masonry: { 1876 columnWidth: '.grid-sizer', 1877 } 1878 }); 1879 } 1880 isotopeObjs.push(_this); 1881 }); 1882 } 1883 }, 1884 error: function (data) { 1885 var output = '<div class="col-12"><span class=text-center>No Images Found</span></div>'; 1886 _this.append(output); 1887 } 1888 }); 1889 }); 1890 1891 /* =================================== 1892 Subscribe popup on page load 1893 ====================================== */ 1894 if (typeof $.fn.magnificPopup === 'function') { 1895 if ($('#subscribe-popup').length > 0) { 1896 let delaySecond = 1.5, 1897 expireDays = 30, 1898 cookieName = 'crafto-promo-popup'; 1899 if (getCookie(cookieName) != 'shown') { 1900 setTimeout(function () { 1901 $.magnificPopup.open({ 1902 showCloseBtn: false, 1903 items: { 1904 src: '#subscribe-popup' 1905 }, 1906 type: 'inline', 1907 mainClass: 'my-mfp-zoom-in', 1908 callbacks: { 1909 close: function () { 1910 if ($('#newsletter-off').is(':checked')) {
1911 setCookie(cookieName, 'shown', expireDays); 1912 } 1913 } 1914 } 1915 }); 1916 }, (delaySecond * 3500)); 1917 } 1918 } 1919 } 1920 1921 /* =================================== 1922 Magnific popup 1923 ====================================== */ 1924 if (typeof $.fn.magnificPopup === 'function') { 1925 // Modal popup 1926 $('.modal-popup').magnificPopup({ 1927 type: 'inline', 1928 preloader: false, 1929 blackbg: true 1930 }); 1931 1932 // Modal popup close 1933 $(document).on('click', '.popup-modal-dismiss', function (e) { 1934 e.preventDefault(); 1935 $.magnificPopup.close(); 1936 }); 1937 1938 // Modal popup - zoom animation 1939 $('.popup-with-zoom-anim').magnificPopup({ 1940 type: 'inline', 1941 fixedContentPos: false, 1942 fixedBgPos: true, 1943 overflowY: 'auto', 1944 closeBtnInside: true, 1945 preloader: false, 1946 midClick: true, 1947 removalDelay: 300, 1948 blackbg: true, 1949 mainClass: 'my-mfp-zoom-in' 1950 }); 1951 1952 // Modal popup - move animation 1953 $('.popup-with-move-anim').magnificPopup({ 1954 type: 'inline', 1955 fixedContentPos: false, 1956 fixedBgPos: true, 1957 overflowY: 'auto', 1958 closeBtnInside: true, 1959 preloader: false, 1960 midClick: true, 1961 removalDelay: 300, 1962 blackbg: true, 1963 mainClass: 'my-mfp-slide-bottom' 1964 }); 1965 1966 // Modal popup - slide up animation 1967 $('.slide-up-animation').magnificPopup({ 1968 type: 'inline', 1969 fixedContentPos: false, 1970 fixedBgPos: true, 1971 overflowY: 'auto', 1972 closeBtnInside: true, 1973 preloader: false, 1974 midClick: true, 1975 removalDelay: 300, 1976 blackbg: true, 1977 mainClass: 'my-mfp-slide-up' 1978 }); 1979 1980 // Popup with form 1981 $('.popup-with-form').magnificPopup({ 1982 type: 'inline', 1983 preloader: false, 1984 fixedContentPos: true, 1985 focus: '#name', 1986 callbacks: { 1987 beforeOpen: function () { 1988 if ($(window).width() < 700) { 1989 this.st.focus = false; 1990 } else { 1991 this.st.focus = '#name'; 1992 } 1993 } 1994 } 1995 }); 1996 1997 // Video magnific popup 1998 $('.popup-youtube, .popup-vimeo, .popup-googlemap').magnificPopup({ 1999 disableOn: 320, 2000 type: 'iframe', 2001 mainClass: 'mfp-fade', 2002 removalDelay: 160, 2003 preloader: false, 2004 fixedContentPos: true, 2005 closeBtnInside: false 2006 }); 2007 2008 // Ajax magnific popup 2009 $('.ajax-popup').magnificPopup({ 2010 type: 'ajax', 2011 alignTop: true, 2012 fixedContentPos: true, 2013 closeBtnInside: false, 2014 overflowY: 'scroll', // as we know that popup content is tall we set scroll overflow by default to avoid jump 2015 callbacks: { 2016 open: function () { 2017 $('.navbar .collapse').removeClass('show'); 2018 $('.navbar a.dropdown-toggle').addClass('collapsed'); 2019 } 2020 } 2021 }); 2022 } 2023 2024 /* =================================== 2025 Contact form validation 2026 ====================================== */ 2027 2028 // Contact form validation on submit 2029 $(document).on('click', '.submit', function () { 2030 var error = false, 2031 _this = $(this), 2032 formObj = _this.parents('form'), 2033 emailFormat = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/, 2034 urlformat = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/, 2035 telFormat = /[0-9 -()+]+$/, 2036 actionURL = formObj.attr('action'), 2037 resultsObj = formObj.find('.form-results'), 2038 grecaptchav3= _this.attr( 'data-sitekey' ) || '', 2039 redirectVal = formObj.find('[name="redirect"]').val(); 2040 formObj.find('.required').removeClass('is-invalid'); 2041 formObj.find('.required').each(function () { 2042 var __this = $(this), 2043 fieldVal = __this.val(); 2044 if (fieldVal == '' || fieldVal == undefined) { 2045 error = true; 2046 __this.addClass('is-invalid'); 2047 } else if (__this.attr('type') == 'email' && !emailFormat.test(fieldVal)) { 2048 error = true; 2049 __this.addClass('is-invalid'); 2050 } else if (__this.attr('type') == 'url' && !urlformat.test(fieldVal)) { 2051 error = true; 2052 __this.addClass('is-invalid'); 2053 } else if (__this.attr('type') == 'tel' && !telFormat.test(fieldVal)) { 2054 error = true; 2055 __this.addClass('is-invalid'); 2056 } 2057 }); 2058 var termsObj = formObj.find('.terms-condition'); 2059 if (termsObj.length) { 2060 if (!termsObj.is(':checked')) { 2061 error = true; 2062 termsObj.addClass('is-invalid'); 2063 } 2064 } 2065 2066 // Google reCaptcha verify 2067 if ( typeof ( grecaptcha ) !== 'undefined' && grecaptcha !== null ) {
2068 if (formObj.find('.g-recaptcha').length) { 2069 var gResponse = grecaptcha.getResponse(); 2070 if (!(gResponse.length)) { 2071 error = true; 2072 formObj.find('.g-recaptcha').addClass('is-invalid'); 2073 } 2074 } else if( grecaptchav3 != '' && grecaptchav3 != undefined ) { // For Version 3 2075 grecaptcha.ready(function() { 2076 grecaptcha.execute(grecaptchav3, {action: 'submit'}).then(function(token) { 2077 }); 2078 }); 2079 } 2080 } 2081 2082 if (!error && actionURL != '' && actionURL != undefined) { 2083 _this.addClass('loading'); 2084 $.ajax({ 2085 type: 'POST', 2086 url: actionURL, 2087 data: formObj.serialize(), 2088 success: function (result) { 2089 _this.removeClass('loading'); 2090 if (redirectVal != '' && redirectVal != undefined) { 2091 window.location.href = redirectVal; 2092 } else { 2093 if (typeof (result) !== 'undefined' && result !== null) { 2094 result = $.parseJSON(result); 2095 } 2096 formObj.find('input[type=text],input[type=url],input[type=email],input[type=tel],input[type=password],textarea').each(function () { 2097 $(this).val(''); 2098 $(this).removeClass('is-invalid'); 2099 }); 2100 formObj.find('.g-recaptcha').removeClass('is-invalid'); 2101 formObj.find('input[type=checkbox],input[type=radio]').prop('checked', false); 2102 if (formObj.find('.g-recaptcha').length) { 2103 grecaptcha.reset(); 2104 } 2105 resultsObj.removeClass('alert-success').removeClass('alert-danger').hide(); 2106 resultsObj.addClass(result.alert).html(result.message); 2107 resultsObj.removeClass('d-none').fadeIn('slow').delay(4000).fadeOut('slow'); 2108 } 2109 } 2110 }); 2111 } 2112 return false; 2113 }); 2114 2115 // Contact form validation on blur 2116 $(document).on('blur', '.required', function () { 2117 var emailFormat = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/, 2118 telFormat = /[0-9 -()+]+$/, 2119 urlformat = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/, 2120 fieldVal = $(this).val(); 2121 if (fieldVal == '' || fieldVal == undefined) { 2122 $(this).addClass('is-invalid'); 2123 } else if ($(this).attr('type') == 'email' && !emailFormat.test(fieldVal)) { 2124 $(this).addClass('is-invalid'); 2125 } else if ($(this).attr('type') == 'url' && !urlformat.test(fieldVal)) { 2126 $(this).addClass('is-invalid'); 2127 } else if ($(this).attr('type') == 'tel' && !telFormat.test(fieldVal)) { 2128 $(this).addClass('is-invalid'); 2129 } else { 2130 $(this).removeClass('is-invalid').addClass('is-valid'); 2131 } 2132 }); 2133 2134 // Validate terms and conditions in form 2135 $(document).on('click', '.terms-condition', function () { 2136 var termsObj = $(this); 2137 if (!termsObj.is(':checked')) { 2138 termsObj.addClass('is-invalid'); 2139 } else { 2140 termsObj.removeClass('is-invalid').addClass('is-valid'); 2141 } 2142 }); 2143 2144 /* =================================== 2145 Revolution slider 2146 ====================================== */ 2147 2148 // Reinit skroller after revolution slider loaded 2149 if ($('.rev_slider').length) { 2150 $('.rev_slider').each(function () { 2151 $(this).one('revolution.slide.onloaded', function () { 2152 reInitSkrollr(); 2153 }); 2154 }); 2155 } 2156 2157 /* =================================== 2158 Window on load 2159 ====================================== */ 2160 2161 $(window).on('load', function () { 2162 2163 // Bootstrap tooltip 2164 var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) 2165 var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 2166 return new bootstrap.Tooltip(tooltipTriggerEl); 2167 }); 2168 2169 // Parallax 2170 if (typeof $.fn.parallax !== 'undefined' && typeof $.fn.parallax !== null) { 2171 setParallax(); 2172 } 2173 2174 // Non retina image code
2175 $("img:not([data-at2x])").each(function () { 2176 $(this).attr('data-no-retina', ''); 2177 }); 2178 2179 // Page loader 2180 if ($('.page-loader').length) { 2181 $('.page-loader').fadeOut(); 2182 } 2183 2184 // Reset isotope loop 2185 resetIsotopeLayoutLoop(isotopeObjs, false); 2186 2187 // Top overlap section position 2188 setOverLayerPosition(); 2189 2190 // Bottom overlap section position 2191 setBottomOverLayerPosition(); 2192 2193 // Set full screen height & top space 2194 setTimeout(function () { 2195 fullScreenHeight(); 2196 setTopSpaceHeight(); 2197 }, headerTransition); // Header transition effect time 2198 }); 2199 2200 /* =================================== 2201 Page loader 2202 ====================================== */ 2203 2204 $(window).on("load", function () { 2205 $('.page-loader').show(); 2206 setTimeout(function () { 2207 $('.page-loader').hide(); 2208 }, 1000); 2209 }); 2210 2211 /* =================================== 2212 Window resize 2213 ====================================== */ 2214 2215 $(window).resize(function () { 2216 slideboxstyle(); 2217 setParallax(); 2218 initScrollNavigate(); 2219 setOverLayerPosition(); 2220 setBottomOverLayerPosition(100); 2221 setSpaceInInteractiveBannerStyle(); 2222 2223 // Update custom scrollbar for full screen & modern menu 2224 if ($('.navbar-collapse-clone').length && typeof $.fn.mCustomScrollbar === 'function') { 2225 $('.navbar-collapse-clone').mCustomScrollbar('update'); 2226 } 2227 2228 // Reset isotope 2229 if (!isMobile) { 2230 setTimeout(function () { 2231 resetIsotopeLayoutLoop(isotopeObjs, true); 2232 }, 300); 2233 } 2234 2235 if ($(window).width() <= 1199) { 2236 destroyAtropos(); 2237 destroySkrollr(); 2238 } else { 2239 if (typeof Atropos !== 'undefined' && typeof Atropos !== null) { 2240 initAtropos(); 2241 } 2242 initSkrollr(); 2243 } 2244 }); 2245 2246 /* =================================== 2247 Window orientation change 2248 ====================================== */ 2249 2250 $(window).on('orientationchange', function (e) { 2251 2252 // Top overlap section position 2253 setOverLayerPosition(); 2254 2255 // Bottom overlap section position 2256 setBottomOverLayerPosition(); 2257 2258 // Set full screen height & top space 2259 setTimeout(function () { 2260 fullScreenHeight(); 2261 setTopSpaceHeight(); 2262 }, headerTransition); // Header transition effect time 2263 2264 // Close all menu 2265 $('.navbar-collapse.collapse').collapse('hide'); 2266 // Close push menu 2267 $('html, body').removeClass('show-menu'); 2268 // Close search 2269 $('body').removeClass('show-search-popup'); 2270 // Header color remove 2271 $('header nav').removeClass('submenu-light').removeClass('submenu-dark'); 2272 // Close all dropdown menu 2273 $('.dropdown').trigger('mouseleave'); 2274 // Close left submenu 2275 $('.sub-menu.show').collapse('hide'); 2276 // Close left simple menu 2277 $('.left-sidebar-header').collapse('hide'); 2278 stickyKitRecalc(); 2279 // Close left modern menu 2280 $('.left-modern-header').collapse('hide'); 2281 }); 2282 2283 /* =================================== 2284 Window scroll 2285 ====================================== */ 2286 2287 $(window).on('scroll', initScrollNavigate); 2288 2289 // Window scroll Function 2290 function initScrollNavigate() { 2291 2292 var scrollPos = $(window).scrollTop(); 2293 2294 // One page navigation 2295 var menuLinks = $('.navbar-nav li a'); 2296 menuLinks.each(function () { 2297 var _this = $(this); 2298 var hasPos = _this.attr('href').indexOf('#'); 2299 if (hasPos > -1) { 2300 var res = _this.attr('href').substring(hasPos); 2301 if (res != '' && res != '#' && $(res).length) { 2302 var refElement = $(_this.attr('href')); 2303 if (refElement.position().top <= (scrollPos + 60) && refElement.position().top + refElement.height() > (scrollPos + 60)) { 2304 menuLinks.removeClass('active'); 2305 _this.addClass('active'); 2306 } 2307 if (scrollPos < 1) { 2308 _this.removeClass('active'); 2309 } 2310 } 2311 } 2312 }); 2313 2314 // Sticky nav Start 2315 var navHeight = 0, 2316 miniHeaderHeight = 0; 2317 if ($('header nav.navbar').length) { 2318 navHeight = $('header nav.navbar').outerHeight(); 2319 } 2320 if ($('.header-top-bar').length) { 2321 miniHeaderHeight = $('.header-top-bar').outerHeight(); 2322 } 2323 var headerHeight = navHeight + miniHeaderHeight; 2324 if (!$('header').hasClass('no-sticky')) { 2325 if (scrollPos >= headerHeight) { 2326 $('header').addClass('sticky'); 2327 if (!$('.header-top-bar').is(':hidden')) { 2328 $('.header-top-bar').css({'top': '-' + (miniHeaderHeight) + 'px'}); 2329 $('.header-top-bar + .navbar').css({'top': '0px'}); 2330 } else { 2331 $('.header-top-bar, .header-top-bar + .navbar').css({'top': ''}); 2332 } 2333 } else if (scrollPos <= headerHeight) { 2334 $('header').removeClass('sticky'); 2335 if (!$('.header-top-bar').is(':hidden')) { 2336 $('.header-top-bar').css({'top': '0px'}); 2337 $('.header-top-bar + .navbar').css({'top': (miniHeaderHeight) + 'px'}); 2338 } else { 2339 $('.header-top-bar, .header-top-bar + .navbar').css({'top': ''}); 2340 } 2341 } 2342 } 2343 2344 // Header sticky 2345 if (scrollPos > (headerHeight + 150)) { 2346 setTimeout(function () { 2347 $('header').addClass('sticky-active'); 2348 }, headerTransition); // Header transition effect time 2349 } 2350 if (scrollPos < headerHeight) { 2351 setTimeout(function () { 2352 $('header').removeClass('sticky-active'); 2353 }, headerTransition); // Header transition effect time 2354 } 2355 2356 // Hide side menu on scroll 2357 if (scrollPos >= 200 && getWindowWidth() > menuBreakPoint) { 2358 2359 // Close all dropdown menu 2360 $('.dropdown').trigger('mouseleave'); 2361 } 2362 2363 // Scroll to top 2364 if (scrollPos > 150) { 2365 $('.scroll-top-arrow').fadeIn('300'); 2366 } else { 2367 $('.scroll-top-arrow').fadeOut('300'); 2368 } 2369 2370 // Set full screen height & top space 2371 if (scrollPos <= 0) { 2372 setTimeout(function () { 2373 fullScreenHeight(); 2374 setTopSpaceHeight(); 2375 }, headerTransition); // Header transition effect time 2376 } 2377 2378 lastScroll = scrollPos; 2379 } 2380 2381 /* =================================== 2382 Utility functions start 2383 ====================================== */ 2384 2385 // Check formatted number 2386 function pad(d) { 2387 return (d < 10) ? '0' + d.toString() : d.toString(); 2388 } 2389 2390 // Check IE browser 2391 function isIE() { 2392 var ua = window.navigator.userAgent, 2393 msie = ua.indexOf('MSIE '); 2394 if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) { 2395 return true; 2396 } else { 2397 return false;
2398 } 2399 return false; 2400 } 2401 2402 // Get window height 2403 function getWindowHeight() { 2404 return $(window).height(); 2405 } 2406 2407 // Get window width 2408 function getWindowWidth() { 2409 return $(window).width(); 2410 } 2411 2412 // Full screen 2413 function fullScreenHeight() { 2414 var fullScreenObj = $('.full-screen'), 2415 minHeight = getWindowHeight(), 2416 headerHeight = getHeaderHeight(); 2417 if (!$('header').hasClass('sticky')) { 2418 fullScreenObj.parents('section').imagesLoaded(function () { 2419 if ($('section:first.full-screen, section:first .full-screen').length && ($('.top-space-margin').length || $('.mobile-top-space').length) || $('.ipad-top-space-margin').length) { 2420 if ($('.ipad-top-space-margin').length) { 2421 if (getWindowWidth() <= menuBreakPoint) { 2422 $('section:first.full-screen, section:first .full-screen').css('height', minHeight - headerHeight); 2423 } else { 2424 $('section:first.full-screen, section:first .full-screen').css('height', minHeight); 2425 } 2426 } else { 2427 $('section:first.full-screen, section:first .full-screen').css('height', minHeight - headerHeight); 2428 } 2429 } else if ($('header nav.navbar').hasClass('top-space-margin') || $('header nav.navbar').hasClass('mobile-top-space')) { 2430 if ($('header nav.navbar').hasClass('ipad-top-space-margin')) { 2431 if (getWindowWidth() <= menuBreakPoint) { 2432 minHeight = minHeight - $('header nav.navbar').outerHeight(); 2433 } 2434 } else { 2435 minHeight = minHeight - $('header nav.navbar').outerHeight(); 2436 } 2437 fullScreenObj.css('height', minHeight); 2438 } else { 2439 fullScreenObj.css('height', minHeight); 2440 } 2441 }); 2442 } 2443 } 2444 2445 // Get cookie 2446 function getCookie(cname) { 2447 var name = cname + "="; 2448 var decodedCookie = decodeURIComponent(document.cookie); 2449 var ca = decodedCookie.split(';'); 2450 for (var i = 0; i < ca.length; i++) { 2451 var c = ca[i]; 2452 while (c.charAt(0) == ' ') { 2453 c = c.substring(1); 2454 } 2455 if (c.indexOf(name) == 0) { 2456 return c.substring(name.length, c.length); 2457 } 2458 } 2459 return ""; 2460 } 2461 2462 // Set cookie 2463 function setCookie(cname, cvalue, exdays) { 2464 var d = new Date(); 2465 d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); 2466 var expires = (exdays != 0 && exdays != '') ? d.toUTCString() : 0; 2467 document.cookie = cname + "=" + cvalue + ";expires=" + expires + ";path=/"; 2468 } 2469 2470 /* =================================== 2471 Swiper slider 2472 ====================================== */ 2473 2474 // Setup swiper slider 2475 function setupSwiper() { 2476 2477 // Swiper slider using params 2478 var swipers = document.querySelectorAll('[data-slider-options]:not(.instafeed-wrapper)'); 2479 swipers.forEach(function (swiperItem) { 2480 var _this = $(swiperItem), 2481 sliderOptions = _this.attr('data-slider-options'); 2482 if (typeof (sliderOptions) !== 'undefined' && sliderOptions !== null) { 2483 2484 sliderOptions = $.parseJSON(sliderOptions); 2485 2486 // If user have provided "data-slide-change-on-click" attribute then below code will execute 2487 var changeOnClick = _this.attr('data-slide-change-on-click'); 2488 if (changeOnClick != '' && changeOnClick != undefined && changeOnClick == '1') { 2489 2490 sliderOptions['on'] = { 2491 click: function () { 2492 if (this.activeIndex > this.clickedIndex) { 2493 this.slidePrev(); 2494 } else if (this.activeIndex < this.clickedIndex) { 2495 this.slideNext(); 2496 } 2497 } 2498 }; 2499 } 2500 2501 /* If user have provided "data-thumb-slider-md-direction" attribute then below code will execute */ 2502 if (sliderOptions['thumbs'] != '' && sliderOptions['thumbs'] != undefined) { 2503 2504 var mdThumbDirection = _this.attr('data-thumb-slider-md-direction'); 2505 if (mdThumbDirection != '' && mdThumbDirection != undefined) { 2506 2507 var thumbDirection = (sliderOptions['thumbs']['swiper']['direction'] != '' && sliderOptions['thumbs']['swiper']['direction'] != undefined) ? sliderOptions['thumbs']['swiper']['direction'] : mdThumbDirection; 2508 sliderOptions['thumbs']['swiper']['on'] = { 2509 init: function () { 2510 if (getWindowWidth() <= sliderBreakPoint) { 2511 this.changeDirection(mdThumbDirection); 2512 } else { 2513 this.changeDirection(thumbDirection); 2514 } 2515 this.update(); 2516 }, 2517 resize: function () { 2518 if (getWindowWidth() <= sliderBreakPoint) { 2519 this.changeDirection(mdThumbDirection); 2520 } else { 2521 this.changeDirection(thumbDirection); 2522 } 2523 this.update(); 2524 }, 2525 click: function () { 2526 /* Product thumbs automatic next / previous on click slide */ 2527 if (this.activeIndex == this.clickedIndex) { 2528 this.slidePrev(); 2529 } else { 2530 this.slideNext(); 2531 } 2532 } 2533 }; 2534 } 2535 } 2536 2537 // If user have provided "data-number-pagination" attribute then below code will execute 2538 var numberPagination = _this.attr('data-number-pagination'); 2539 if (numberPagination != '' && numberPagination != undefined && numberPagination == '1' && sliderOptions['pagination'] != '' && sliderOptions['pagination'] != undefined) { 2540 sliderOptions['pagination']['renderBullet'] = function (index, className) { 2541 return '<span class="' + className + '">' + pad(index + 1) + '</span>'; 2542 } 2543 } 2544 2545 // If user have provided "data-thumbs" attribute then below code will execute 2546 var dataThumbs = _this.attr('data-thumbs'); 2547 if (dataThumbs != '' && dataThumbs != undefined && sliderOptions['pagination'] != '' && sliderOptions['pagination'] != undefined) { 2548 dataThumbs = $.parseJSON(dataThumbs); 2549 if (typeof (dataThumbs) !== 'undefined' && dataThumbs !== null) { 2550 sliderOptions['pagination']['renderBullet'] = function (index, className) { 2551 return '<span class="' + className + '" style="background-image: url( ' + dataThumbs[index] + ' )"></span>'; 2552 } 2553 } 2554 } 2555 2556 sliderOptions['on'] = { 2557 init: function () { 2558 let slides = this.slides; 2559 let activeIndex = this.activeIndex, 2560 current_slide = this.slides[activeIndex], 2561 anime_el = current_slide.querySelectorAll('[data-anime]'), 2562 fancy_el = current_slide.querySelectorAll('[data-fancy-text]'); 2563 2564 if (getWindowWidth() > animeBreakPoint) { 2565 if (anime_el) { 2566 anime_el.forEach(element => { 2567 let options = element.getAttribute('data-anime'); 2568 2569 if (typeof (options) !== 'undefined' && options !== null) { 2570 options = $.parseJSON(options); 2571 2572 element.classList.add('appear'); 2573 element.style.transition = "none"; 2574 2575 if (options.el) { 2576 for (let i = 0; i < element.children.length; i++) { 2577 element.children[i].style.transition = "none"; 2578 element.children[i].classList.add('appear'); 2579 } 2580 } 2581 animeAnimation(element, options); 2582 element.classList.remove('appear'); 2583 } 2584 }); 2585 } 2586 } 2587 }, 2588 slideChange: function () { 2589 // Get active slide 2590 let slides = this.slides; 2591 let activeIndex = this.activeIndex, 2592 current_slide = this.slides[activeIndex], 2593 anime_el = current_slide.querySelectorAll('[data-anime]'), 2594 fancy_el = current_slide.querySelectorAll('[data-fancy-text]'); 2595 2596 if (getWindowWidth() > animeBreakPoint) { 2597 if (fancy_el) { 2598 fancy_el.forEach(element => { 2599 element.classList.add('appear'); 2600 let fancy_options = element.getAttribute('data-fancy-text'); 2601 if (typeof (fancy_options) !== 'undefined' && fancy_options !== null) { 2602 fancy_options = $.parseJSON(fancy_options); 2603 let child = element; 2604 if(activeIndex != 0){ 2605 FancyTextDefault(child, fancy_options); 2606 element.classList.remove('appear'); 2607 } 2608 // FancyTextDefault(child, fancy_options); 2609 // element.classList.remove('appear'); 2610 } 2611 }); 2612 } 2613 2614 if (anime_el) { 2615 anime_el.forEach(element => { 2616 let options = element.getAttribute('data-anime'); 2617 2618 if (typeof (options) !== 'undefined' && options !== null) { 2619 options = $.parseJSON(options); 2620 2621 element.classList.add('appear'); 2622 element.style.transition = "none"; 2623 2624 if (options.el) { 2625 for (let i = 0; i < element.children.length; i++) { 2626 element.children[i].style.transition = "none"; 2627 element.children[i].classList.add('appear'); 2628 } 2629 } 2630 animeAnimation(element, options); 2631 element.classList.remove('appear'); 2632 } 2633 }); 2634 } 2635 } 2636 } 2637 }; 2638 2639 // If swiper has number navigation 2640 var isNumberPagination = _this.attr('data-swiper-number-line-pagination') || false; 2641 var isNumberNavigation = _this.attr('data-swiper-number-navigation') || false; 2642 var isNumberPaginationProgress = _this.attr('data-swiper-number-pagination-progress') || false; 2643 var showProgress = _this.attr('data-swiper-show-progress') || false; 2644 var hasGalleryBox = _this.attr('data-gallery-box') || false; 2645 if (isNumberPagination || isNumberNavigation || isNumberPaginationProgress || hasGalleryBox) { 2646 sliderOptions['on'] = { 2647 init: function () { 2648 if (isNumberPagination || isNumberNavigation || isNumberPaginationProgress) { 2649 if (sliderOptions.hasOwnProperty('loop') && sliderOptions['loop']) { 2650 var slideLength = this.slides.length; 2651 } 2652 var length = slideLength; 2653 if (isNumberPaginationProgress) { 2654 _this.parent().find('.number-next').text('0' + length); 2655 _this.parent().find('.number-prev').text('01'); 2656 _this.parent().find('.swiper-pagination-progress')[0].style.setProperty('--swiper-progress',
2656(100 / length).toFixed(2) + '%'); 2657 } else { 2658 _this.parent().find('.number-next').text('02'); 2659 _this.parent().find('.number-prev').text('0' + length); 2660 if (showProgress) 2661 _this.parent().find('.swiper-pagination-progress')[0].style.setProperty('--swiper-progress', (100 / length).toFixed(2) + '%'); 2662 } 2663 } 2664 if (typeof $.fn.magnificPopup === 'function') { 2665 if (hasGalleryBox) { 2666 _this.magnificPopup({ 2667 delegate: 'a', 2668 type: 'image', 2669 closeOnContentClick: true, 2670 closeBtnInside: false, 2671 gallery: {enabled: true} 2672 }); 2673 } 2674 } 2675 }, 2676 slideChange: function () { 2677 if (isNumberPagination || isNumberNavigation || isNumberPaginationProgress) { 2678 if (sliderOptions.hasOwnProperty('loop') && sliderOptions['loop']) { 2679 var slideLength = this.slides.length; 2680 } 2681 var length = this.slides.length, 2682 active = (this.realIndex) + 1, 2683 next = active + 1, 2684 prev = active - 1; 2685 if (active == 1) { 2686 prev = length; 2687 } 2688 if (active == length) { 2689 next = 1; 2690 } 2691 if (isNumberPaginationProgress) { 2692 _this.parent().find('.number-prev').each(function () { 2693 $(this).text(active < 10 ? '0' + active : active); 2694 }); 2695 _this.parent().find('.swiper-pagination-progress')[0].style.setProperty('--swiper-progress', ((100 / length) * active).toFixed(2) + '%'); 2696 } else { 2697 _this.parent().find('.number-next').each(function () { 2698 $(this).text(next < 10 ? '0' + next : next); 2699 }); 2700 _this.parent().find('.number-prev').each(function () { 2701 $(this).text(prev < 10 ? '0' + prev : prev); 2702 }); 2703 if (showProgress) 2704 _this.parent().find('.swiper-pagination-progress')[0].style.setProperty('--swiper-progress', ((100 / length) * active).toFixed(2) + '%'); 2705 } 2706 } 2707 } 2708 } 2709 } 2710 2711 // Move thumb slide on click in product page. 2712 var thumbClick = _this.attr('data-swiper-thumb-click') || false; 2713 if (thumbClick && sliderOptions.hasOwnProperty('thumbs')) { 2714 sliderOptions['thumbs']['swiper']['on'] = { 2715 click: function (swiper) { 2716 if (swiper.activeIndex >= swiper.clickedIndex) { 2717 swiper.slidePrev(); 2718 } else if (swiper.activeIndex < swiper.clickedIndex) { 2719 swiper.slideNext(); 2720 } 2721 } 2722 } 2723 } 2724 2725 if (typeof Swiper === 'function') { 2726 _this.imagesLoaded(function () { 2727 var swiperObj = new Swiper(swiperItem, sliderOptions); 2728 swiperObjs.push(swiperObj); 2729 }); 2730 } 2731 } 2732 }); 2733 } 2734 2735 /* =================================== 2736 Parallax background 2737 ====================================== */ 2738 2739 function setParallax() { 2740 if (!isIE()) { 2741 if (typeof $.fn.parallax !== 'undefined' && typeof $.fn.parallax !== null) { 2742 $('[data-parallax-background-ratio]').each(function () { 2743 var ratio = $(this).attr('data-parallax-background-ratio') || 0.5; 2744 $(this).parallax('50%', ratio); 2745 }); 2746 $('[data-parallax-layout-ratio]').each(function () { 2747 var ratio = $(this).attr('data-parallax-layout-ratio') || 1; 2748 $(this).parallaxImg(ratio); 2749 }); 2750 } 2751 2752 $('[data-parallax-liquid]').each(function () { 2753 var scale = $(this).attr('data-parallax-scale') || 0; 2754 var scaleFraction = parseFloat($(this).attr('data-parallax-scale-fraction')); 2755 var reverse = $(this).attr('data-parallax-reverse') ? $(this).attr('data-parallax-reverse') : false;
2756 var parallaxTransition = parseFloat($(this).attr('data-parallax-transition')) ? parseFloat($(this).attr('data-parallax-transition')) : 1.5; 2757 if (typeof $.fn.parallaxLiquidImg !== 'undefined' && typeof $.fn.parallaxLiquidImg !== null) { 2758 $(this).parallaxLiquidImg(parallaxTransition, parseFloat(scale), scaleFraction, reverse); 2759 } 2760 }); 2761 } 2762 } 2763 2764 /* =================================== 2765 Overlap section 2766 ====================================== */ 2767 2768 // Top overlap section position 2769 function setOverLayerPosition() { 2770 if (($('.overlap-section').length > 0 || $('.overlap-section-one-fourth').length > 0 || $('.overlap-section-three-fourth').length > 0)) { 2771 $('.overlap-section, .overlap-section-one-fourth, .overlap-section-three-fourth').each(function () { 2772 let _this = $(this), 2773 overlayBreakpoint = 767; 2774 2775 if (_this.hasClass('md-overlap-disable')) { 2776 overlayBreakpoint = 991; 2777 } else if (_this.hasClass('sm-overlap-disable')) { 2778 overlayBreakpoint = 767; 2779 } 2780 2781 if (getWindowWidth() > overlayBreakpoint) { 2782 setTimeout(function () { 2783 _this.imagesLoaded(function () { 2784 var closestSectionObj = _this.closest('section'); 2785 if (_this.closest('footer').length) { 2786 closestSectionObj = _this.closest('footer'); 2787 } 2788 var sectionPaddingTop = parseInt(closestSectionObj.css('padding-top')), 2789 areaHeight = _this.find('*').outerHeight(), 2790 overlayTop = areaHeight + sectionPaddingTop; 2791 if (_this.hasClass('overlap-section-one-fourth')) { 2792 overlayTop = (areaHeight / 4) - overlayTop; 2793 } else if (_this.hasClass('overlap-section-three-fourth')) { 2794 overlayTop = ((areaHeight * 3) / 4) - overlayTop; 2795 } else { 2796 overlayTop = (areaHeight / 2) - overlayTop; 2797 } 2798 _this.css('margin-top', overlayTop); 2799 var parentSectionObj = closestSectionObj.prev('.overlap-height'), 2800 overlapGap = parentSectionObj.find('.overlap-gap-section'); 2801 parentSectionObj.imagesLoaded(function () { 2802 if (overlapGap.length > 0) { 2803 var gapSectionHeight = overlapGap.outerHeight() + (Math.abs(overlayTop) - sectionPaddingTop); 2804 overlapGap.parents('.overlap-height').height(gapSectionHeight); 2805 } 2806 }); 2807 }); 2808 }, 500); 2809 } else { 2810 setTimeout(function () { 2811 $('.overlap-height').height('inherit'); 2812 $('.overlap-section, .overlap-section-one-fourth, .overlap-section-three-fourth').css('margin-top', 'inherit'); 2813 }, 500); 2814 } 2815 }); 2816 } 2817 } 2818 2819 // Bottom overlap section position 2820 function setBottomOverLayerPosition(delay) { 2821 if (($('.overlap-section-bottom').length > 0) && getWindowWidth() >= 768) { 2822 $('.overlap-section-bottom').each(function () { 2823 var _this = $(this), 2824 timeOut = (_this.find('.instafeed-wrapper').length > 0) ? delay : 10; 2825 setTimeout(function () { 2826 _this.imagesLoaded(function () { 2827 var areaHeight = _this.outerHeight(), 2828 overlayerMargin = ((areaHeight / 2) - areaHeight); 2829 _this.parents('section').next('.overlap-gap-section-bottom').css('margin-top', overlayerMargin); 2830 _this.parents('section').next('.overlap-gap-section-bottom').css('padding-top', areaHeight); 2831 }); 2832 }, timeOut); 2833 }); 2834 } else { 2835 $('.overlap-gap-section-bottom').css('margin-top', ''); 2836 $('.overlap-gap-section-bottom').css('padding-top', ''); 2837 } 2838 } 2839 2840 /* =================================== 2841 Magic cursor 2842 ====================================== */ 2843 2844 if ($('.magic-cursor').length > 0) { 2845 $('<div class="magic-cursor-wrapper"><div id="ball-cursor"><div id="ball-cursor-loader"></div></div></div>').clone(false).appendTo('body'); 2846 2847 if ($('.magic-cursor').hasClass('light')) { 2848 $('.magic-cursor-wrapper').addClass('magic-cursor-light'); 2849 } 2850 if ($('.magic-cursor').hasClass('base-color')) { 2851 $('.magic-cursor-wrapper').addClass('magic-cursor-base-color'); 2852 } 2853 if ($('.magic-cursor').hasClass('view-cursor')) { 2854 $('.magic-cursor-wrapper').addClass('magic-view-cursor'); 2855 } 2856 if ($('.magic-cursor').hasClass('drag-cursor')) { 2857 $('.magic-cursor-wrapper').addClass('magic-drag-cursor'); 2858 } 2859 if ($('.magic-cursor').hasClass('round-cursor')) { 2860 $('.magic-cursor-wrapper').addClass('magic-round-cursor'); 2861 } 2862 2863 var mouse = { 2864 x: 0, 2865 y: 0 2866 }, 2867 pos = { 2868 x: 0, 2869 y: 0 2870 }, 2871 ratio = .65, 2872 active = !1, 2873 ball = document.getElementById('ball-cursor'), 2874 ballloader = document.getElementById('ball-cursor-loader'); 2875 2876 function mouseMove(e) { 2877 var a = window.pageYOffset || document.documentElement.scrollTop; 2878 mouse.x = e.pageX, mouse.y = e.pageY - a 2879 } 2880 2881 function updatePosition() { 2882 active || (pos.x += (mouse.x - pos.x) * ratio, pos.y += (mouse.y - pos.y) * ratio, TweenLite.to(ball, .4, { 2883 x: pos.x, 2884 y: pos.y, 2885 })) 2886 } 2887 if (typeof TweenLite !== "undefined") { 2888 TweenLite.set(ball, { 2889 xPercent: -50, 2890 yPercent: -50, 2891 scale: 0, 2892 borderWidth: "0", 2893 opacity: 1 2894 }); 2895 } 2896 document.addEventListener("mousemove", mouseMove); 2897 if (typeof gsap !== "undefined") { 2898 gsap.ticker.add(updatePosition); 2899 } 2900 2901 if (typeof TweenMax !== 'undefined' && typeof TweenMax !== null) {
2902 $('.magic-cursor').mouseenter(function (e) { 2903 TweenMax.to('#ball-cursor', 0.3, { 2904 borderWidth: '2px', 2905 scale: 1, 2906 }); 2907 TweenMax.to('#ball-cursor-loader', 0.2, { 2908 borderWidth: '2px', 2909 top: 2, 2910 left: 2 2911 }); 2912 $('.magic-cursor-wrapper').addClass('sliderhover'); 2913 if ($(this).hasClass('magic-cursor-vertical')) { 2914 $('.magic-cursor-wrapper').addClass('vertical'); 2915 } 2916 }); 2917 } 2918 if (typeof TweenMax !== 'undefined' && typeof TweenMax !== null) { 2919 $('.magic-cursor').mouseleave(function (e) { 2920 TweenMax.to('#ball-cursor', 0.3, { 2921 borderWidth: '2px', 2922 scale: 1, 2923 borderColor: 'transparent', 2924 opacity: 1 2925 }); 2926 TweenMax.to('#ball-cursor-loader', 0.2, { 2927 borderWidth: '2px', 2928 top: 0, 2929 left: 0 2930 }); 2931 $('.magic-cursor-wrapper').removeClass('sliderhover'); 2932 }); 2933 } 2934 } 2935 2936 $(document).on('mouseenter', '.swiper-button-next, .swiper-button-prev, .swiper-pagination, a:not(.force-magic-cursor)', function () { 2937 $('.magic-cursor-wrapper').css({'opacity': 0}); 2938 }).on('mouseleave', '.swiper-button-next, .swiper-button-prev, .swiper-pagination, a:not(.force-magic-cursor)', function () { 2939 $('.magic-cursor-wrapper').css({'opacity': 1}); 2940 }); 2941 2942 /* =================================== 2943 Box shadow animation 2944 ====================================== */ 2945 2946 $(window).scroll(function (event) { 2947 $('[data-shadow-animation="true"]').each(function () { 2948 addBoxAnimationClass($(this)) 2949 }); 2950 }); 2951 $('[data-shadow-animation="true"]').removeClass('shadow-in'); 2952 $('[data-shadow-animation="true"]').each(function () { 2953 addBoxAnimationClass($(this)) 2954 }); 2955 function addBoxAnimationClass(boxObj) { 2956 if (boxObj.length) { 2957 var w = boxObj.width(); 2958 var h = boxObj.height(); 2959 var offset = boxObj.offset(); 2960 var right = offset.left + parseInt(boxObj.width()); 2961 var bottom = offset.top + parseInt(boxObj.height()); 2962 var visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - offset.left, right - window.pageXOffset)); 2963 var visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - offset.top, bottom - window.pageYOffset)); 2964 var visible = visibleX * visibleY / (w * h); 2965 if (visible >= 0.5) { 2966 if (typeof boxObj.attr('data-animation-delay') !== 'undefined' && boxObj.attr('data-animation-delay') > 10) { 2967 setTimeout(function () { 2968 boxObj.addClass('shadow-in'); 2969 }, boxObj.attr('data-animation-delay')); 2970 } else { 2971 boxObj.addClass('shadow-in'); 2972 } 2973 } 2974 } 2975 } 2976 2977 /* =================================== 2978 Skrollr animation 2979 ====================================== */ 2980 2981 var skroller; 2982 function initSkrollr() { 2983 if (typeof skrollr !== 'undefined' && typeof skrollr !== null) { 2984 skroller = skrollr.init({ 2985 'forceHeight': false, 2986 'smoothScrollingDuration': 1000, 2987 'mobileCheck': function () { 2988 return false; 2989 } 2990 }); 2991 } 2992 } 2993 2994 function reInitSkrollr() { 2995 destroySkrollr(); 2996 if ($(window).width() >= 1200) { 2997 setTimeout(function () { 2998 initSkrollr(); 2999 }, 1000); 3000 } 3001 } 3002 3003 function destroySkrollr() { 3004 if (typeof skroller !== typeof undefined && skroller != 'undefined') { 3005 skroller.destroy(); 3006 } 3007 } 3008 3009 if ($(window).width() >= 1200) { 3010 initSkrollr(); 3011 } 3012 3013 /* =================================== 3014 Particles 3015 ====================================== */ 3016 3017 var particleDefaultOptions = { 3018 particles: { 3019 number: { 3020 value: 80, 3021 density: { 3022 enable: !1, 3023 value_area: 800 3024 } 3025 }, 3026 color: {
3027 value: ["#fdc14c", "#fd5c4c", "#48bb0f"] 3028 }, 3029 shape: { 3030 type: "circle" 3031 }, 3032 size: { 3033 value: 10, 3034 random: !0, 3035 anim: { 3036 enable: !0, 3037 speed: 1 3038 } 3039 }, 3040 opacity: { 3041 value: 0.5, 3042 random: false 3043 }, 3044 move: { 3045 direction: "right", 3046 attract: { 3047 enable: !0 3048 } 3049 }, 3050 line_linked: { 3051 enable: !1 3052 } 3053 }, 3054 interactivity: { 3055 events: { 3056 onhover: { 3057 enable: !1 3058 }, 3059 onclick: { 3060 enable: !1 3061 } 3062 } 3063 }, 3064 "retina_detect": true 3065 }; 3066 var particleItems = $('[data-particle="true"]'); 3067 if (typeof particlesJS === 'function' && particleItems.length) { 3068 $.each(particleItems, function (index, particleItem) { 3069 var particleId = $(particleItem).attr('id'); 3070 var particleItemOptions = $(particleItem).attr('data-particle-options'); 3071 if (particleItemOptions != 'undefined' && typeof particleItemOptions !== typeof undefined) { 3072 particleItemOptions = JSON.parse(particleItemOptions); 3073 } else { 3074 particleItemOptions = particleDefaultOptions; 3075 } 3076 particlesJS(particleId, particleItemOptions); 3077 }); 3078 } 3079 3080 /* =================================== 3081 SVG animated image mask 3082 ====================================== */ 3083 3084 $('.animatedSvgPath').each(function () { 3085 var animePath = $(this); 3086 var paths = animePath.attr('pathdata:id').split(';'); 3087 paths.splice(paths.length, 0, animePath.attr('d')); 3088 anime({ 3089 targets: animePath[0], 3090 duration: 10000, 3091 easing: 'cubicBezier(0.5, 0, 0.5, 1)', 3092 d: paths, 3093 loop: true 3094 }); 3095 }); 3096 3097 /* =================================== 3098 Custom cursor 3099 ====================================== */ 3100 3101 var customCursorInit = false; 3102 handleCustomCursor(); 3103 3104 // Custom cursor issue 3105 forceHideCustomCursor(); 3106 $(window).resize(function () { 3107 if (!customCursorInit && !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) { 3108 handleCustomCursor(); 3109 } 3110 forceHideCustomCursor(); 3111 }); 3112 function forceHideCustomCursor() { 3113 setTimeout(function () { 3114 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 3115 $('.cursor-page-inner').hide(); 3116 } else { 3117 $('.cursor-page-inner').show(); 3118 } 3119 }, 250); 3120 } 3121 3122 function handleCustomCursor() { 3123 if ($('body').hasClass('custom-cursor')) { 3124 customCursorInit = true; 3125 const cursorInnerEl = document.querySelector('.circle-cursor-inner'); 3126 const cursorOuterEl = document.querySelector('.circle-cursor-outer'); 3127 let lastY, lastX; 3128 let magneticFlag = false; 3129 let anchorHover = false; 3130 3131 // Document - mouse move 3132 window.onmousemove = function (event) { 3133 if (!magneticFlag) { 3134 cursorOuterEl.style.transform = 'translate(' + event.clientX + 'px, ' + event.clientY + 'px' + ')'; 3135 } 3136 if (cursorInnerEl.style.opacity = '0') { 3137 cursorInnerEl.style.opacity = '1'; 3138 } 3139 cursorInnerEl.style.transform = 'translate(' + event.clientX + 'px, ' + event.clientY + 'px' + ')'; 3140 lastY = event.clientY; 3141 lastX = event.clientX; 3142 } 3143 3144 // Link - mouse enter 3145 $('body').on('mouseenter', 'a', function () { 3146 cursorInnerEl.classList.add('cursor-link-hover'); 3147 cursorOuterEl.classList.add('cursor-link-hover'); 3148 anchorHover = true; 3149 }); 3150 3151 // Disable custom cursor when mouse enter in the magic cursor element 3152 $('body').on('mouseenter', '.magic-cursor', function () { 3153 cursorInnerEl.style.visibility = 'hidden'; 3154 cursorOuterEl.style.visibility = 'hidden'; 3155 }); 3156 3157 // Enable custom cursor when mouse leave from the magic cursor element 3158 $('body').on('mouseleave', '.magic-cursor', function () { 3159 cursorInnerEl.style.visibility = 'visible'; 3160 cursorOuterEl.style.visibility = 'visible'; 3161 }); 3162 3163 // Link - mouse leave 3164 $('body').on('mouseleave', 'a', function () { 3165 if ($(this).is('a') && $(this).closest('.cursor-as-
3165pointer').length) { 3166 return; 3167 } 3168 cursorInnerEl.classList.remove('cursor-link-hover'); 3169 cursorOuterEl.classList.remove('cursor-link-hover'); 3170 anchorHover = false; 3171 }); 3172 3173 // Cursor - mouse enter 3174 $('body').on('mouseenter', '.rounded-box', function () { 3175 const $elem = $(this); 3176 const scrollTop = window.pageYOffset || document.documentElement.scrollTop; 3177 3178 if (anchorHover) { 3179 cursorInnerEl.classList.remove('cursor-link-hover'); 3180 cursorOuterEl.classList.remove('cursor-link-hover'); 3181 } 3182 3183 cursorOuterEl.style.transition = 'all .2s ease-out'; 3184 cursorOuterEl.style.transform = 'translate(' + $elem.offset().left + 'px, ' + ($elem.offset().top - scrollTop) + 'px' + ')'; 3185 cursorOuterEl.style.width = $elem.width() + 'px'; 3186 cursorOuterEl.style.height = $elem.height() + 'px'; 3187 cursorOuterEl.style.marginLeft = 0; 3188 cursorOuterEl.style.marginTop = 0; 3189 magneticFlag = true; 3190 }); 3191 3192 // Cursor - mouse leave 3193 $('body').on('mouseleave', '.rounded-box', function () { 3194 if (anchorHover) { 3195 cursorInnerEl.classList.add('cursor-link-hover'); 3196 cursorOuterEl.classList.add('cursor-link-hover'); 3197 } 3198 3199 cursorOuterEl.style.transition = null; 3200 cursorOuterEl.style.width = null; 3201 cursorOuterEl.style.height = null; 3202 cursorOuterEl.style.marginLeft = null; 3203 cursorOuterEl.style.marginTop = null; 3204 magneticFlag = false; 3205 }); 3206 3207 cursorInnerEl.style.visibility = 'visible'; 3208 cursorOuterEl.style.visibility = 'visible'; 3209 } 3210 } 3211 3212 /* =================================== 3213 Stack animataion 3214 ====================================== */ 3215 3216 stackAnimation(); 3217 var stackLastScroll = 0; 3218 function stackAnimation() { 3219 windowScrollTop = window.pageYOffset || document.documentElement.scrollTop; 3220 $('.stack-box').each(function () { 3221 if ($(window).width() > 1199) { 3222 var _this = $(this); 3223 var stackItems = _this.find('.stack-item'); 3224 if (stackItems.length) { 3225 if (windowScrollTop > stackLastScroll) { 3226 _this.addClass('forward'); 3227 _this.removeClass('reverse'); 3228 } else { 3229 _this.removeClass('forward'); 3230 _this.addClass('reverse'); 3231 } 3232 3233 for (let i = 0; i < stackItems.length - 1; i++) { 3234 var stackBoxHeight = (_this.height() / (_this.find('.stack-item').length)) * i; 3235 var stackTopPosition = _this.offset().top; 3236 if ((windowScrollTop - stackTopPosition) > stackBoxHeight) { 3237 var yMove = windowScrollTop - stackTopPosition - stackBoxHeight; 3238 if (yMove > _this.outerHeight()) { 3239 yMove = _this.outerHeight(); 3240 } 3241 $(stackItems[i]).css({'height': 'calc(100vh - ' + yMove + 'px)'}); 3242 $(stackItems[i]).addClass('active'); 3243 } else { 3244 $(stackItems[i]).css({'height': 'calc(100vh - 0px)'}); 3245 $(stackItems[i]).removeClass('active'); 3246 } 3247 } 3248 } 3249 } else { 3250 $('.stack-box .stack-item').css({'height': 'inherit'}); 3251 } 3252 }); 3253 3254 stackLastScroll = windowScrollTop; 3255 } 3256 $(window).scroll(function () { 3257 stackAnimation(); 3258 }); 3259 3260 /* =================================== 3261 Image tilt 3d effect using atropos 3262 ====================================== */ 3263 3264 var atroposItems = document.querySelectorAll('[data-atropos]') 3265 function initAtropos() { 3266 if (atroposItems.length && $(window).width() > 1199) {
3267 atroposItems.forEach(function (atroposItem) { 3268 var myAtropos = Atropos({ 3269 el: atroposItem 3270 }); 3271 }); 3272 } 3273 } 3274 if (typeof Atropos !== 'undefined' && Atropos !== null) { 3275 initAtropos(); 3276 } 3277 function destroyAtropos() { 3278 if (atroposItems.length && $(window).width() > 1199) { 3279 atroposItems.forEach(function (atroposItem) { 3280 if (atroposItem.__atropos__) { 3281 atroposItem.__atropos__.destroy(); 3282 } 3283 }); 3284 } 3285 } 3286 3287 /* =================================== 3288 Sticky vertical strip - add dark section class 3289 ====================================== */ 3290 3291 var getElementsInArea = (function (docElm) { 3292 var viewportHeight = docElm.clientHeight; 3293 return function (e, opts) { 3294 var found = [], i; 3295 if (e && e.type == 'resize') { 3296 viewportHeight = docElm.clientHeight; 3297 } 3298 for (i = opts.elements.length; i--; ) { 3299 var elm = opts.elements[i], 3300 pos = elm.getBoundingClientRect(), 3301 topPerc = pos.top / viewportHeight * 100, 3302 bottomPerc = pos.bottom / viewportHeight * 100, 3303 middle = (topPerc + bottomPerc) / 2, 3304 inViewport = middle > opts.zone[1] && middle < (100 - opts.zone[1]); 3305 3306 elm.classList.toggle(opts.markedClass, inViewport); 3307 3308 if (inViewport) { 3309 found.push(elm); 3310 } 3311 } 3312 }; 3313 })(document.documentElement); 3314 3315 $(window).on('scroll resize load', function (e) { 3316 getElementsInArea(e, { 3317 elements: document.querySelectorAll('.section-dark'), 3318 markedClass: 'section-dark-highlight', 3319 zone: [10, 10] 3320 }); 3321 if ($('.section-dark-highlight').length > 0) { 3322 $('.sticky-wrap').addClass('sticky-highlight'); 3323 } else { 3324 $('.sticky-wrap').removeClass('sticky-highlight'); 3325 } 3326 }); 3327 3328 $(document).on('appear', 'footer', function (e) { 3329 $('.sticky-wrap').addClass('sticky-hidden'); 3330 }).on('disappear', 'footer', function (e) { 3331 $('.sticky-wrap').removeClass('sticky-hidden'); 3332 }); 3333 3334 /* =================================== 3335 Quantity input 3336 ====================================== */ 3337 3338 $('.qty-plus').click(function () { 3339 var th = $(this).closest('.quantity').find('.qty-text'); 3340 th.val(+th.val() + 1); 3341 }); 3342 $('.qty-minus').click(function () { 3343 var th = $(this).closest('.quantity').find('.qty-text'); 3344 if (th.val() > 1) 3345 th.val(+th.val() - 1); 3346 }); 3347 3348 /* =================================== 3349 Infinite looping animation 3350 ====================================== */ 3351 3352 const wrapperEl = document.querySelector('.looping-wrapper') || false; 3353 const numberOfEls = 100; 3354 const duration = 6000; 3355 const delay = duration / numberOfEls; 3356 3357 let tl = anime.timeline({ 3358 duration: delay, 3359 complete: function () { 3360 tl.restart(); 3361 } 3362 }); 3363 3364 function createEl(i) { 3365 let el = document.createElement('div'); 3366 const rotate = (360 / numberOfEls) * i; 3367 const translateY = -50; 3368 el.classList.add('el'); 3369 el.style.transform = 'rotate(' + rotate + 'deg) translateY(' + translateY + '%)'; 3370 tl.add({ 3371 begin: function () { 3372 anime({ 3373 targets: el, 3374 rotate: [rotate + 'deg', rotate + 10 + 'deg'], 3375 translateY: [translateY + '%', translateY + 10 + '%'], 3376 scale: [1, 1.25], 3377 easing: 'easeInOutSine', 3378 direction: 'alternate', 3379 duration: duration * .1 3380 }); 3381 } 3382 }); 3383 if (wrapperEl) 3384 wrapperEl.appendChild(el); 3385 } 3386 3387 for (let i = 0; i < numberOfEls; i++) 3388 createEl(i); 3389 3390 /* ===================================
3391 Background color change on scroll - Adaptive Backgrounds 3392 ====================================== */ 3393 window.sections = [...document.querySelectorAll('[data-background]')]; 3394 window.lastScrollTop = window.pageYOffset; 3395 let activeSection; 3396 3397 onScroll(); 3398 window.addEventListener('scroll', onScroll); 3399 3400 function onScroll() { 3401 if (window.sections.length > 0) { 3402 const section = window.sections 3403 .map(section => { 3404 const el = section; 3405 const rect = el.getBoundingClientRect(); 3406 return {el, rect}; 3407 }) 3408 .find(section => section.rect.bottom >= (window.innerHeight * 0.5)); 3409 if (section && section.el !== activeSection) { 3410 activeSection = section.el; 3411 const sectionBg = activeSection.getAttribute('data-background'); 3412 activeSection.closest(".page-content").querySelectorAll("[data-background]").forEach(item => item.classList.remove("active")) 3413 activeSection.classList.add("active") 3414 if (typeof gsap !== "undefined") { 3415 gsap.to(activeSection.closest(".page-content"), {backgroundColor: sectionBg}) 3416 } 3417 } 3418 } 3419 } 3420 3421 /* =================================== 3422 Cookies set 3423 ====================================== */ 3424 if (typeof $.cookie === 'function') { 3425 if ($('body').find('#cookies-model').length > 0) { 3426 setTimeout(function () { 3427 var cookieModel = $('#cookies-model'), 3428 cookieConsentclosed = $.cookie('cookieConsent'); 3429 3430 if (cookieConsentclosed == 'closed') { 3431 cookieModel.remove(); 3432 } else { 3433 cookieModel.show(); 3434 } 3435 3436 cookieModel.find('[data-accept-btn]').on('click', function (e) { 3437 e.preventDefault(); 3438 var expiresDays = 1; 3439 cookieModel.remove(); 3440 $.cookie('cookieConsent', 'closed', {expires: expiresDays, path: '/'}); 3441 }); 3442 }, 1000); 3443 } 3444 } 3445 3446 /* =================================== 3447 Back to top scroll 3448 ====================================== */ 3449 $(document).on('click', '.scroll-top', function () { 3450 $('html, body').animate({scrollTop: 0}, 800); 3451 return false; 3452 }); 3453 3454 function scrollIndicator() { 3455 var scrollTop = document.documentElement.scrollTop; 3456 if (scrollTop > 200) { 3457 $('.scroll-progress').addClass('visible'); 3458 } else { 3459 $('.scroll-progress').removeClass('visible'); 3460 } 3461 3462 var scrollHeight = document.documentElement.scrollHeight; 3463 var windowHeight = document.documentElement.clientHeight; 3464 var maxScrollTop = scrollHeight - windowHeight; 3465 var scrollTop = document.documentElement.scrollTop; 3466 var scrollPercentage = (scrollTop / (maxScrollTop - 200)) * 100; 3467 3468 $('.scroll-point').css('height', Math.min(scrollPercentage, 100) + '%'); 3469 3470 /***** Theme demos button scroll to show *****/ 3471 var scrollPos = $(window).scrollTop(); 3472 if (scrollPos > 150) { 3473 $('.theme-demos').fadeIn(600); 3474 } 3475 } 3476 $(window).scroll(function () { 3477 scrollIndicator(); 3478 }); 3479 3480 /* =================================== 3481 Trusted customers 3482 ====================================== */ 3483 3484 $('.bg-more-trusted .btn').click(function (e) { 3485 e.preventDefault(); 3486 $(this).parent().parent().addClass('show-trusted-customers'); 3487 }); 3488 3489 3490 /* =================================== 3491 Theme demo panel 3492 ====================================== */ 3493 3494 //var themeDemoHTML = '<div class="theme-demos"><div class="demo-button-wrapper"><div class="buy-theme"><a href="https://1.envato.market/R53mL2" target="_blank"><div class="theme-wrapper"><div><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 22.284 25.436"><path d="M19.314,9.285c-.745-.414-2.882-.158-5.449.637-4.492,3.07-8.283,7.594-8.547,14.858-.048.174-.491-.024-.579-.077a10.346,10.346,0,0,1-.681-8.3c.189-.314-.428-.7-.539-.591a12.683,12.683,0,0,0-1.765,2.278,11.061,11.061,0,0,0,19.33,10.759c3.438-6.161.246-18.432-1.77-19.558Z" transform="translate(-0.32 -9.089)" fill="#fff"></path></svg></div></div></a></div><div class="all-demo"><a href="#"><i class="feather icon-feather-x align-middle"></i><div class="theme-wrapper"><div>48+ Pre-built sites</div></div></a></div></div><span class="close-popup fs-22 text-dark-gray w-40px h-40px d-flex justify-content-center align-items-center"><i class="fa-solid fa-xmark"></i></span></div>'; 3495 //var themeDemoData = '<section class="theme-demos-main d-flex justify-content-center"><div class="demos-wrapper w-100"><div class="w-100 demos-wrapper-inner"><div class="w-100 text-center mb-15px"><h3 class="fw-700 text-dark-gray ls-minus-1px ps-20 pe-20 mb-35px">48+ Pre-built websites</h3></div><div class="container-fluid"><div class="row"><div class="col-12"><ul class="portfolio-wrapper grid grid-4col xxl-grid-4col xl-grid-3col lg-grid-2col md-grid-2col sm-gr
3495id-1col xs-grid-1col gutter-extra-large"><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-corporate.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-corporate.jpg" alt=""></a> </div><div class="portfolio-caption text-center pt-15px pb-10px"><a href="demo-corporate.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Corporate</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"><a href="demo-restaurant.html" target="_blank"><img class="border-radius-6px w-100" src="images/demo-restaurant.jpg" alt=""></a></div><div class="portfolio-caption text-center pt-15px pb-10px"><a href="demo-restaurant.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Restaurant</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"><a href="demo-branding-agency.html" target="_blank"><img class="border-radius-6px w-100" src="images/demo-branding-agency.jpg" alt=""></a></div><div class="portfolio-caption text-center pt-15px pb-10px"><a href="demo-branding-agency.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Branding agency</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"><a href="demo-elearning.html" target="_blank"><img class="border-radius-6px w-100" src="images/demo-elearning.jpg" alt=""></a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-elearning.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">eLearning</a> </div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-it-business.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-it-business.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-it-business.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">IT Business</a> </div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-data-analysis.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-data-analysis.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-data-analysis.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Data analysis</a> </div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-hotel-and-resort.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-hotel-and-resort.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-hotel-and-resort.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Hotel resort</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-scattered-portfolio.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-scattered-portfolio.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-scattered-portfolio.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Scattered portfolio</a> </div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-beauty-salon.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-beauty-salon.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-beauty-salon.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Beauty salon</a> </div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image">
3495 <a href="demo-product-showcase.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-product.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-product-showcase.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Product showcase</a> </div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-medical.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-medical.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-medical.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Medical</a> </div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-marketing.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-marketing.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-marketing.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Marketing</a> </div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-gym-and-fitness.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-gym-and-fitness.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-gym-and-fitness.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Gym & fitness</a> </div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-design-agency.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-design-agency.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-design-agency.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Design agency</a> </div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-accounting.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-accounting.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-accounting.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Accounting</a> </div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-fashion-store.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-fashion-store.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-fashion-store.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Fashion store</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-interactive-portfolio.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-interactive-portfolio.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-interactive-portfolio.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Interactive portfolio</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-yoga-and-meditation.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-yoga-and-meditation.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-yoga-and-meditation.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Yoga & meditation</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-travel-agency.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-travel-agency.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-travel-agency.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Travel agency</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-photography.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-photography.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-photography.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Photography</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-ebook.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-ebook.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-ebook.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">eBook</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-conference.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-conference.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-conference.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Conference</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-freelancer.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-freelancer.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-freelancer.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Freelancer</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-lawyer.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-lawyer.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-lawyer.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Lawyer</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-blogger.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-blogger.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-blogger.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Blogger</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-business.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-business.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-business.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Business</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-horizontal-portfolio.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-horizontal-portfolio.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-horizontal-portfolio.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Horizontal portfolio</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-finance.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-finance.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-finance.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Finance</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-decor-store.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-decor-store.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-decor-store.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Decor store</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-wedding-invitation.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-wedding-invitation.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-wedding-invitation.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Wedding invitation</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-vertical-portfolio.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-vertical-portfolio.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-vertical-portfolio.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Vertical portfolio</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-pizza-parlor.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-pizza-parlor.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-pizza-parlor.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Pizza parlor</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-music-onepage.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-music.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-music-onepage.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">music</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-magazine.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-magazine.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-magazine.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Magazine</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-charity.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-charity.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-charity.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">
3495Charity</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-hosting.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-hosting.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-hosting.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Hosting</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-jewellery-store.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-jewellery-store.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-jewellery-store.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Jewellery store</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-architecture.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-architecture.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-architecture.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Architecture</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-minimal-portfolio.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-minimal-portfolio.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-minimal-portfolio.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Minimal portfolio</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-digital-agency.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-digital-agency.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-digital-agency.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Digital agency</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-consulting.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-consulting.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-consulting.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Consulting</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-application.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-application.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-application.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Application</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-real-estate.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-real-estate.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-real-estate.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Real estate</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-seo-agency.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-seo-agency.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-seo-agency.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Seo agency</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-spa-salon.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-spa-salon.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-spa-salon.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Spa salon</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-barber.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-barber.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-barber.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Barber</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-web-agency.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-web-agency.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-web-agency.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Web agency</a></div></div></li><li class="grid-item"><div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"><div class="portfolio-image"> <a href="demo-startup.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-startup.jpg" alt=""> </a> </div><div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-startup.html" target="_blank" class="text-dark-gray text-dark-gray-hover fw-600">Startup</a></div></div></li></ul></div></div></div><div class="w-100 text-center"><a href="https://1.envato.market/R53mL2" target="_blank" class="btn btn-dark-gray btn-large btn-switch-text btn-rounded btn-box-sha
3495dow mt-50px text-transform-none"><span><span class="btn-double-text" data-text="Purchase Crafto">Purchase Crafto</span><span><i class="feather icon-feather-shopping-cart"></i></span></span></a></div></div></div></section>'; 3496 //$('body:not( .landing-page )').append(themeDemoHTML); 3497 3498 $(document).on('click', '.all-demo', function () { 3499 var themeDemosObj = $(this).parents('.theme-demos'); 3500 if (!themeDemosObj.hasClass('active')) { 3501 themeDemosObj.append(themeDemoData); 3502 themeDemosObj.addClass('active'); 3503 $('body').addClass('overflow-hidden'); 3504 } else { 3505 themeDemosObj.removeClass('active'); 3506 $('body').removeClass('overflow-hidden'); 3507 } 3508 }); 3509 var timer; 3510 $(document).on('click', '.close-popup', function () { 3511 var themeDemosObj = $(this).parents('.theme-demos'); 3512 themeDemosObj.removeClass('active'); 3513 $('body').removeClass('overflow-hidden'); 3514 clearTimeout(timer); 3515 timer = setTimeout(function () { 3516 $('.theme-demos-main').animate({scrollTop: '0'}, 'slow'); 3517 }, 800); 3518 3519 }); 3520 3521 $(document).on('keydown', function (event) { 3522 if (event.key == "Escape") { 3523 var themeDemosObj = $('.theme-demos'); 3524 themeDemosObj.removeClass('active'); 3525 $('body').removeClass('overflow-hidden'); 3526 clearTimeout(timer); 3527 timer = setTimeout(function () { 3528 $('.theme-demos-main').animate({scrollTop: '0'}, 'slow'); 3529 }, 800); 3530 } 3531 }); 3532 3533 $(".all-demo a").click(function (event) { 3534 event.preventDefault(); 3535 }); 3536 3537})(jQuery); 3538 3539/* =================================== 3540 Google map 3541 ====================================== */ 3542 3543function initMap() { 3544 $('.map').each(function (e) { 3545 let _this = $(this), 3546 mapOptions = _this.attr('data-map-options'); 3547 3548 // Convert String into the Json 3549 if (typeof (mapOptions) !== 'undefined' && mapOptions !== null) { 3550 mapOptions = $.parseJSON(mapOptions); 3551 } 3552 3553 let lat = mapOptions.lat ? mapOptions.lat : 19.07, 3554 lng = mapOptions.lng ? mapOptions.lng : 72.87, 3555 marker = mapOptions.marker, 3556 popup = mapOptions.popup; 3557 3558 switch (mapOptions.style && mapOptions.style.toLowerCase()) { 3559 case 'retro': 3560 map_style = Retro 3561 break; 3562 case 'standard': 3563 map_style = Standard 3564 break; 3565 case 'silver': 3566 map_style = Silver 3567 break; 3568 case 'dark': 3569 map_style = Dark 3570 break; 3571 case 'night': 3572 map_style = Night 3573 break; 3574 case 'aubergine': 3575 map_style = Aubergine 3576 break; 3577 default: 3578 map_style = Silver 3579 } 3580 3581 // Google Map variable 3582 const gmap = new google.maps.Map(this, { 3583 zoom: 13, 3584 center: new google.maps.LatLng(lat, lng), 3585 mapTypeId: google.maps.MapTypeId.READMAP, 3586 styles: map_style 3587 }); 3588 3589 // InforWindow variable 3590 const infowindow = new google.maps.InfoWindow({ 3591 content: popup && popup.html, 3592 maxWidth: 300, 3593 }); 3594 infowindow.setPosition(new google.maps.LatLng(lat, lng)); 3595 3596 // Marker Options 3597 if (marker !== null && marker !== undefined) { 3598 // Custom HTML Marker 3599 if (marker.type.toLowerCase() === 'html') { 3600 3601 function HTMLMarker(lat, lng) { 3602 this.lat = lat; 3603 this.lng = lng; 3604 this.pos = new google.maps.LatLng(lat, lng); 3605 } 3606 3607 HTMLMarker.prototype = new google.maps.OverlayView(); 3608 3609 //init html 3610 HTMLMarker.prototype.onAdd = function () { 3611 div = document.createElement('DIV'); 3612 div.className = `arrow_box ${marker.class ? ' ' + marker.class : ''}`; 3613 div.innerHTML = `<span style='background-color: ${marker.color}; border-color: ${marker.color}'></span><span style='background-color: ${marker.color}; border-color: ${marker.color}'></span>`;
3614 div.style.setProperty('background-color', marker.color); 3615 let panes = this.getPanes(); 3616 panes.overlayImage.appendChild(div); 3617 3618 let flag = false; 3619 3620 if (popup.defaultOpen === true) { 3621 flag = true; 3622 infowindow.setOptions({pixelOffset: new google.maps.Size(10, -30)}); 3623 infowindow.open(gmap); 3624 } 3625 3626 google.maps.event.addDomListener(div, "click", function (event) { 3627 if (popup) { 3628 infowindow.setOptions({pixelOffset: new google.maps.Size(10, -30)}); 3629 if (flag === false) { 3630 infowindow.open(gmap); 3631 flag = true; 3632 } else { 3633 infowindow.close(); 3634 flag = false; 3635 } 3636 } 3637 }); 3638 } 3639 3640 HTMLMarker.prototype.draw = function () { 3641 let overlayProjection = this.getProjection(); 3642 let position = overlayProjection.fromLatLngToDivPixel(this.pos); 3643 let panes = this.getPanes(); 3644 panes.overlayImage.style.left = position.x + 'px'; 3645 panes.overlayImage.style.top = position.y - 30 + 'px'; 3646 } 3647 3648 let htmlMarker = new HTMLMarker(lat, lng); 3649 htmlMarker.setMap(gmap); 3650 3651 } else { 3652 // Custom Image Marker 3653 const image_marker = new google.maps.Marker({ 3654 icon: {url: marker.src}, 3655 position: {lat: lat, lng: lng}, 3656 map: gmap, 3657 animation: google.maps.Animation.DROP, 3658 }); 3659 let flag = false; 3660 3661 if (popup.defaultOpen === true) { 3662 infowindow.open({ 3663 anchor: image_marker, 3664 map: gmap 3665 }); 3666 flag = true; 3667 } 3668 3669 image_marker.addListener("click", toggleBounce); 3670 3671 function toggleBounce() { 3672 if (image_marker.getAnimation() !== null) { 3673 image_marker.setAnimation(null); 3674 } else { 3675 image_marker.setAnimation(google.maps.Animation.BOUNCE); 3676 } 3677 3678 if (popup) { 3679 if (flag === false) { 3680 infowindow.open({ 3681 anchor: image_marker, 3682 map: gmap 3683 }); 3684 flag = true; 3685 } else { 3686 infowindow.close(); 3687 flag = false; 3688 } 3689 } 3690 } 3691 } 3692 } else { 3693 // Default Marker 3694 const marker = new google.maps.Marker({ 3695 position: {lat: lat, lng: lng}, 3696 map: gmap 3697 }); 3698 3699 let flag = false; 3700 3701 if (popup.defaultOpen === true) { 3702 infowindow.open({ 3703 anchor: marker, 3704 map: gmap 3705 }); 3706 flag = true; 3707 } 3708 3709 marker.addListener("click", function () { 3710 if (popup) { 3711 if (flag === false) { 3712 infowindow.open({ 3713 anchor: marker, 3714 map: gmap 3715 }); 3716 flag = true; 3717 } else { 3718 infowindow.close(); 3719 flag = false; 3720 } 3721 } 3722 }); 3723 } 3724 }); 3725}
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.