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 2605 FancyTextDefault(child, fancy_options); 2606 element.classList.remove('appear'); 2607 } 2608 }); 2609 } 2610 2611 if (anime_el) { 2612 anime_el.forEach(element => { 2613 let options = element.getAttribute('data-anime'); 2614 2615 if (typeof (options) !== 'undefined' && options !== null) { 2616 options = $.parseJSON(options); 2617 2618 element.classList.add('appear'); 2619 element.style.transition = "none"; 2620 2621 if (options.el) { 2622 for (let i = 0; i < element.children.length; i++) { 2623 element.children[i].style.transition = "none"; 2624 element.children[i].classList.add('appear'); 2625 } 2626 } 2627 animeAnimation(element, options); 2628 element.classList.remove('appear'); 2629 } 2630 }); 2631 } 2632 } 2633 } 2634 }; 2635 2636 // If swiper has number navigation 2637 var isNumberPagination = _this.attr('data-swiper-number-line-pagination') || false; 2638 var isNumberNavigation = _this.attr('data-swiper-number-navigation') || false; 2639 var isNumberPaginationProgress = _this.attr('data-swiper-number-pagination-progress') || false; 2640 var showProgress = _this.attr('data-swiper-show-progress') || false; 2641 var hasGalleryBox = _this.attr('data-gallery-box') || false; 2642 if (isNumberPagination || isNumberNavigation || isNumberPaginationProgress || hasGalleryBox) { 2643 sliderOptions['on'] = { 2644 init: function () { 2645 if (isNumberPagination || isNumberNavigation || isNumberPaginationProgress) { 2646 if (sliderOptions.hasOwnProperty('loop') && sliderOptions['loop']) { 2647 var slideLength = this.slides.length; 2648 } 2649 var length = slideLength; 2650 if (isNumberPaginationProgress) { 2651 _this.parent().find('.number-next').text('0' + length); 2652 _this.parent().find('.number-prev').text('01'); 2653 _this.parent().find('.swiper-pagination-progress')[0].style.setProperty('--swiper-progress',
2653(100 / length).toFixed(2) + '%'); 2654 } else { 2655 _this.parent().find('.number-next').text('02'); 2656 _this.parent().find('.number-prev').text('0' + length); 2657 if (showProgress) 2658 _this.parent().find('.swiper-pagination-progress')[0].style.setProperty('--swiper-progress', (100 / length).toFixed(2) + '%'); 2659 } 2660 } 2661 if (typeof $.fn.magnificPopup === 'function') { 2662 if (hasGalleryBox) { 2663 _this.magnificPopup({ 2664 delegate: 'a', 2665 type: 'image', 2666 closeOnContentClick: true, 2667 closeBtnInside: false, 2668 gallery: {enabled: true} 2669 }); 2670 } 2671 } 2672 }, 2673 slideChange: function () { 2674 if (isNumberPagination || isNumberNavigation || isNumberPaginationProgress) { 2675 if (sliderOptions.hasOwnProperty('loop') && sliderOptions['loop']) { 2676 var slideLength = this.slides.length; 2677 } 2678 var length = this.slides.length, 2679 active = (this.realIndex) + 1, 2680 next = active + 1, 2681 prev = active - 1; 2682 if (active == 1) { 2683 prev = length; 2684 } 2685 if (active == length) { 2686 next = 1; 2687 } 2688 if (isNumberPaginationProgress) { 2689 _this.parent().find('.number-prev').each(function () { 2690 $(this).text(active < 10 ? '0' + active : active); 2691 }); 2692 _this.parent().find('.swiper-pagination-progress')[0].style.setProperty('--swiper-progress', ((100 / length) * active).toFixed(2) + '%'); 2693 } else { 2694 _this.parent().find('.number-next').each(function () { 2695 $(this).text(next < 10 ? '0' + next : next); 2696 }); 2697 _this.parent().find('.number-prev').each(function () { 2698 $(this).text(prev < 10 ? '0' + prev : prev); 2699 }); 2700 if (showProgress) 2701 _this.parent().find('.swiper-pagination-progress')[0].style.setProperty('--swiper-progress', ((100 / length) * active).toFixed(2) + '%'); 2702 } 2703 } 2704 } 2705 } 2706 } 2707 2708 // Move thumb slide on click in product page. 2709 var thumbClick = _this.attr('data-swiper-thumb-click') || false; 2710 if (thumbClick && sliderOptions.hasOwnProperty('thumbs')) { 2711 sliderOptions['thumbs']['swiper']['on'] = { 2712 click: function (swiper) { 2713 if (swiper.activeIndex >= swiper.clickedIndex) { 2714 swiper.slidePrev(); 2715 } else if (swiper.activeIndex < swiper.clickedIndex) { 2716 swiper.slideNext(); 2717 } 2718 } 2719 } 2720 } 2721 2722 if (typeof Swiper === 'function') { 2723 _this.imagesLoaded(function () { 2724 var swiperObj = new Swiper(swiperItem, sliderOptions); 2725 swiperObjs.push(swiperObj); 2726 }); 2727 } 2728 } 2729 }); 2730 } 2731 2732 /* =================================== 2733 Parallax background 2734 ====================================== */ 2735 2736 function setParallax() { 2737 if (!isIE()) { 2738 if (typeof $.fn.parallax !== 'undefined' && typeof $.fn.parallax !== null) { 2739 $('[data-parallax-background-ratio]').each(function () { 2740 var ratio = $(this).attr('data-parallax-background-ratio') || 0.5; 2741 $(this).parallax('50%', ratio); 2742 }); 2743 $('[data-parallax-layout-ratio]').each(function () { 2744 var ratio = $(this).attr('data-parallax-layout-ratio') || 1; 2745 $(this).parallaxImg(ratio); 2746 }); 2747 } 2748 2749 $('[data-parallax-liquid]').each(function () { 2750 var scale = $(this).attr('data-parallax-scale') || 0; 2751 var scaleFraction = parseFloat($(this).attr('data-parallax-scale-fraction')); 2752 var reverse = $(this).attr('data-parallax-reverse') ? $(this).attr('data-parallax-reverse') : false;
2753 var parallaxTransition = parseFloat($(this).attr('data-parallax-transition')) ? parseFloat($(this).attr('data-parallax-transition')) : 1.5; 2754 if (typeof $.fn.parallaxLiquidImg !== 'undefined' && typeof $.fn.parallaxLiquidImg !== null) { 2755 $(this).parallaxLiquidImg(parallaxTransition, parseFloat(scale), scaleFraction, reverse); 2756 } 2757 }); 2758 } 2759 } 2760 2761 /* =================================== 2762 Overlap section 2763 ====================================== */ 2764 2765 // Top overlap section position 2766 function setOverLayerPosition() { 2767 if (($('.overlap-section').length > 0 || $('.overlap-section-one-fourth').length > 0 || $('.overlap-section-three-fourth').length > 0)) { 2768 $('.overlap-section, .overlap-section-one-fourth, .overlap-section-three-fourth').each(function () { 2769 let _this = $(this), 2770 overlayBreakpoint = 767; 2771 2772 if (_this.hasClass('md-overlap-disable')) { 2773 overlayBreakpoint = 991; 2774 } else if (_this.hasClass('sm-overlap-disable')) { 2775 overlayBreakpoint = 767; 2776 } 2777 2778 if (getWindowWidth() > overlayBreakpoint) { 2779 setTimeout(function () { 2780 _this.imagesLoaded(function () { 2781 var closestSectionObj = _this.closest('section'); 2782 if (_this.closest('footer').length) { 2783 closestSectionObj = _this.closest('footer'); 2784 } 2785 var sectionPaddingTop = parseInt(closestSectionObj.css('padding-top')), 2786 areaHeight = _this.find('*').outerHeight(), 2787 overlayTop = areaHeight + sectionPaddingTop; 2788 if (_this.hasClass('overlap-section-one-fourth')) { 2789 overlayTop = (areaHeight / 4) - overlayTop; 2790 } else if (_this.hasClass('overlap-section-three-fourth')) { 2791 overlayTop = ((areaHeight * 3) / 4) - overlayTop; 2792 } else { 2793 overlayTop = (areaHeight / 2) - overlayTop; 2794 } 2795 _this.css('margin-top', overlayTop); 2796 var parentSectionObj = closestSectionObj.prev('.overlap-height'), 2797 overlapGap = parentSectionObj.find('.overlap-gap-section'); 2798 parentSectionObj.imagesLoaded(function () { 2799 if (overlapGap.length > 0) { 2800 var gapSectionHeight = overlapGap.outerHeight() + (Math.abs(overlayTop) - sectionPaddingTop); 2801 overlapGap.parents('.overlap-height').height(gapSectionHeight); 2802 } 2803 }); 2804 }); 2805 }, 500); 2806 } else { 2807 setTimeout(function () { 2808 $('.overlap-height').height('inherit'); 2809 $('.overlap-section, .overlap-section-one-fourth, .overlap-section-three-fourth').css('margin-top', 'inherit'); 2810 }, 500); 2811 } 2812 }); 2813 } 2814 } 2815 2816 // Bottom overlap section position 2817 function setBottomOverLayerPosition(delay) { 2818 if (($('.overlap-section-bottom').length > 0) && getWindowWidth() >= 768) { 2819 $('.overlap-section-bottom').each(function () { 2820 var _this = $(this), 2821 timeOut = (_this.find('.instafeed-wrapper').length > 0) ? delay : 10; 2822 setTimeout(function () { 2823 _this.imagesLoaded(function () { 2824 var areaHeight = _this.outerHeight(), 2825 overlayerMargin = ((areaHeight / 2) - areaHeight); 2826 _this.parents('section').next('.overlap-gap-section-bottom').css('margin-top', overlayerMargin); 2827 _this.parents('section').next('.overlap-gap-section-bottom').css('padding-top', areaHeight); 2828 }); 2829 }, timeOut); 2830 }); 2831 } else { 2832 $('.overlap-gap-section-bottom').css('margin-top', ''); 2833 $('.overlap-gap-section-bottom').css('padding-top', ''); 2834 } 2835 } 2836 2837 /* =================================== 2838 Magic cursor 2839 ====================================== */ 2840 2841 if ($('.magic-cursor').length > 0) { 2842 $('<div class="magic-cursor-wrapper"><div id="ball-cursor"><div id="ball-cursor-loader"></div></div></div>').clone(false).appendTo('body'); 2843 2844 if ($('.magic-cursor').hasClass('light')) { 2845 $('.magic-cursor-wrapper').addClass('magic-cursor-light'); 2846 } 2847 if ($('.magic-cursor').hasClass('base-color')) { 2848 $('.magic-cursor-wrapper').addClass('magic-cursor-base-color'); 2849 } 2850 if ($('.magic-cursor').hasClass('view-cursor')) { 2851 $('.magic-cursor-wrapper').addClass('magic-view-cursor'); 2852 } 2853 if ($('.magic-cursor').hasClass('drag-cursor')) { 2854 $('.magic-cursor-wrapper').addClass('magic-drag-cursor'); 2855 } 2856 if ($('.magic-cursor').hasClass('round-cursor')) { 2857 $('.magic-cursor-wrapper').addClass('magic-round-cursor'); 2858 } 2859 2860 var mouse = { 2861 x: 0, 2862 y: 0 2863 }, 2864 pos = { 2865 x: 0, 2866 y: 0 2867 }, 2868 ratio = .65, 2869 active = !1, 2870 ball = document.getElementById('ball-cursor'), 2871 ballloader = document.getElementById('ball-cursor-loader'); 2872 2873 function mouseMove(e) { 2874 var a = window.pageYOffset || document.documentElement.scrollTop; 2875 mouse.x = e.pageX, mouse.y = e.pageY - a 2876 } 2877 2878 function updatePosition() { 2879 active || (pos.x += (mouse.x - pos.x) * ratio, pos.y += (mouse.y - pos.y) * ratio, TweenLite.to(ball, .4, { 2880 x: pos.x, 2881 y: pos.y, 2882 })) 2883 } 2884 if (typeof TweenLite !== "undefined") { 2885 TweenLite.set(ball, { 2886 xPercent: -50, 2887 yPercent: -50, 2888 scale: 0, 2889 borderWidth: "0", 2890 opacity: 1 2891 }); 2892 } 2893 document.addEventListener("mousemove", mouseMove); 2894 if (typeof gsap !== "undefined") { 2895 gsap.ticker.add(updatePosition); 2896 } 2897 2898 if (typeof TweenMax !== 'undefined' && typeof TweenMax !== null) {
2899 $('.magic-cursor').mouseenter(function (e) { 2900 TweenMax.to('#ball-cursor', 0.3, { 2901 borderWidth: '2px', 2902 scale: 1, 2903 }); 2904 TweenMax.to('#ball-cursor-loader', 0.2, { 2905 borderWidth: '2px', 2906 top: 2, 2907 left: 2 2908 }); 2909 $('.magic-cursor-wrapper').addClass('sliderhover'); 2910 if ($(this).hasClass('magic-cursor-vertical')) { 2911 $('.magic-cursor-wrapper').addClass('vertical'); 2912 } 2913 }); 2914 } 2915 if (typeof TweenMax !== 'undefined' && typeof TweenMax !== null) { 2916 $('.magic-cursor').mouseleave(function (e) { 2917 TweenMax.to('#ball-cursor', 0.3, { 2918 borderWidth: '2px', 2919 scale: 1, 2920 borderColor: 'transparent', 2921 opacity: 1 2922 }); 2923 TweenMax.to('#ball-cursor-loader', 0.2, { 2924 borderWidth: '2px', 2925 top: 0, 2926 left: 0 2927 }); 2928 $('.magic-cursor-wrapper').removeClass('sliderhover'); 2929 }); 2930 } 2931 } 2932 2933 $(document).on('mouseenter', '.swiper-button-next, .swiper-button-prev, .swiper-pagination, a:not(.force-magic-cursor)', function () { 2934 $('.magic-cursor-wrapper').css({'opacity': 0}); 2935 }).on('mouseleave', '.swiper-button-next, .swiper-button-prev, .swiper-pagination, a:not(.force-magic-cursor)', function () { 2936 $('.magic-cursor-wrapper').css({'opacity': 1}); 2937 }); 2938 2939 /* =================================== 2940 Box shadow animation 2941 ====================================== */ 2942 2943 $(window).scroll(function (event) { 2944 $('[data-shadow-animation="true"]').each(function () { 2945 addBoxAnimationClass($(this)) 2946 }); 2947 }); 2948 $('[data-shadow-animation="true"]').removeClass('shadow-in'); 2949 $('[data-shadow-animation="true"]').each(function () { 2950 addBoxAnimationClass($(this)) 2951 }); 2952 function addBoxAnimationClass(boxObj) { 2953 if (boxObj.length) { 2954 var w = boxObj.width(); 2955 var h = boxObj.height(); 2956 var offset = boxObj.offset(); 2957 var right = offset.left + parseInt(boxObj.width()); 2958 var bottom = offset.top + parseInt(boxObj.height()); 2959 var visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - offset.left, right - window.pageXOffset)); 2960 var visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - offset.top, bottom - window.pageYOffset)); 2961 var visible = visibleX * visibleY / (w * h); 2962 if (visible >= 0.5) { 2963 if (typeof boxObj.attr('data-animation-delay') !== 'undefined' && boxObj.attr('data-animation-delay') > 10) { 2964 setTimeout(function () { 2965 boxObj.addClass('shadow-in'); 2966 }, boxObj.attr('data-animation-delay')); 2967 } else { 2968 boxObj.addClass('shadow-in'); 2969 } 2970 } 2971 } 2972 } 2973 2974 /* =================================== 2975 Skrollr animation 2976 ====================================== */ 2977 2978 var skroller; 2979 function initSkrollr() { 2980 if (typeof skrollr !== 'undefined' && typeof skrollr !== null) { 2981 skroller = skrollr.init({ 2982 'forceHeight': false, 2983 'smoothScrollingDuration': 1000, 2984 'mobileCheck': function () { 2985 return false; 2986 } 2987 }); 2988 } 2989 } 2990 2991 function reInitSkrollr() { 2992 destroySkrollr(); 2993 if ($(window).width() >= 1200) { 2994 setTimeout(function () { 2995 initSkrollr(); 2996 }, 1000); 2997 } 2998 } 2999 3000 function destroySkrollr() { 3001 if (typeof skroller !== typeof undefined && skroller != 'undefined') { 3002 skroller.destroy(); 3003 } 3004 } 3005 3006 if ($(window).width() >= 1200) { 3007 initSkrollr(); 3008 } 3009 3010 /* =================================== 3011 Particles 3012 ====================================== */ 3013 3014 var particleDefaultOptions = { 3015 particles: { 3016 number: { 3017 value: 80, 3018 density: { 3019 enable: !1, 3020 value_area: 800 3021 } 3022 }, 3023 color: {
3024 value: ["#fdc14c", "#fd5c4c", "#48bb0f"] 3025 }, 3026 shape: { 3027 type: "circle" 3028 }, 3029 size: { 3030 value: 10, 3031 random: !0, 3032 anim: { 3033 enable: !0, 3034 speed: 1 3035 } 3036 }, 3037 opacity: { 3038 value: 0.5, 3039 random: false 3040 }, 3041 move: { 3042 direction: "right", 3043 attract: { 3044 enable: !0 3045 } 3046 }, 3047 line_linked: { 3048 enable: !1 3049 } 3050 }, 3051 interactivity: { 3052 events: { 3053 onhover: { 3054 enable: !1 3055 }, 3056 onclick: { 3057 enable: !1 3058 } 3059 } 3060 }, 3061 "retina_detect": true 3062 }; 3063 var particleItems = $('[data-particle="true"]'); 3064 if (typeof particlesJS === 'function' && particleItems.length) { 3065 $.each(particleItems, function (index, particleItem) { 3066 var particleId = $(particleItem).attr('id'); 3067 var particleItemOptions = $(particleItem).attr('data-particle-options'); 3068 if (particleItemOptions != 'undefined' && typeof particleItemOptions !== typeof undefined) { 3069 particleItemOptions = JSON.parse(particleItemOptions); 3070 } else { 3071 particleItemOptions = particleDefaultOptions; 3072 } 3073 particlesJS(particleId, particleItemOptions); 3074 }); 3075 } 3076 3077 /* =================================== 3078 SVG animated image mask 3079 ====================================== */ 3080 3081 $('.animatedSvgPath').each(function () { 3082 var animePath = $(this); 3083 var paths = animePath.attr('pathdata:id').split(';'); 3084 paths.splice(paths.length, 0, animePath.attr('d')); 3085 anime({ 3086 targets: animePath[0], 3087 duration: 10000, 3088 easing: 'cubicBezier(0.5, 0, 0.5, 1)', 3089 d: paths, 3090 loop: true 3091 }); 3092 }); 3093 3094 /* =================================== 3095 Custom cursor 3096 ====================================== */ 3097 3098 var customCursorInit = false; 3099 handleCustomCursor(); 3100 3101 // Custom cursor issue 3102 forceHideCustomCursor(); 3103 $(window).resize(function () { 3104 if (!customCursorInit && !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) { 3105 handleCustomCursor(); 3106 } 3107 forceHideCustomCursor(); 3108 }); 3109 function forceHideCustomCursor() { 3110 setTimeout(function () { 3111 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 3112 $('.cursor-page-inner').hide(); 3113 } else { 3114 $('.cursor-page-inner').show(); 3115 } 3116 }, 250); 3117 } 3118 3119 function handleCustomCursor() { 3120 if ($('body').hasClass('custom-cursor')) { 3121 customCursorInit = true; 3122 const cursorInnerEl = document.querySelector('.circle-cursor-inner'); 3123 const cursorOuterEl = document.querySelector('.circle-cursor-outer'); 3124 let lastY, lastX; 3125 let magneticFlag = false; 3126 let anchorHover = false; 3127 3128 // Document - mouse move 3129 window.onmousemove = function (event) { 3130 if (!magneticFlag) { 3131 cursorOuterEl.style.transform = 'translate(' + event.clientX + 'px, ' + event.clientY + 'px' + ')'; 3132 } 3133 if (cursorInnerEl.style.opacity = '0') { 3134 cursorInnerEl.style.opacity = '1'; 3135 } 3136 cursorInnerEl.style.transform = 'translate(' + event.clientX + 'px, ' + event.clientY + 'px' + ')'; 3137 lastY = event.clientY; 3138 lastX = event.clientX; 3139 } 3140 3141 // Link - mouse enter 3142 $('body').on('mouseenter', 'a', function () { 3143 cursorInnerEl.classList.add('cursor-link-hover'); 3144 cursorOuterEl.classList.add('cursor-link-hover'); 3145 anchorHover = true; 3146 }); 3147 3148 // Disable custom cursor when mouse enter in the magic cursor element 3149 $('body').on('mouseenter', '.magic-cursor', function () { 3150 cursorInnerEl.style.visibility = 'hidden'; 3151 cursorOuterEl.style.visibility = 'hidden'; 3152 }); 3153 3154 // Enable custom cursor when mouse leave from the magic cursor element 3155 $('body').on('mouseleave', '.magic-cursor', function () { 3156 cursorInnerEl.style.visibility = 'visible'; 3157 cursorOuterEl.style.visibility = 'visible'; 3158 }); 3159 3160 // Link - mouse leave 3161 $('body').on('mouseleave', 'a', function () { 3162 if ($(this).is('a') && $(this).closest('.cursor-as-
3162pointer').length) { 3163 return; 3164 } 3165 cursorInnerEl.classList.remove('cursor-link-hover'); 3166 cursorOuterEl.classList.remove('cursor-link-hover'); 3167 anchorHover = false; 3168 }); 3169 3170 // Cursor - mouse enter 3171 $('body').on('mouseenter', '.rounded-box', function () { 3172 const $elem = $(this); 3173 const scrollTop = window.pageYOffset || document.documentElement.scrollTop; 3174 3175 if (anchorHover) { 3176 cursorInnerEl.classList.remove('cursor-link-hover'); 3177 cursorOuterEl.classList.remove('cursor-link-hover'); 3178 } 3179 3180 cursorOuterEl.style.transition = 'all .2s ease-out'; 3181 cursorOuterEl.style.transform = 'translate(' + $elem.offset().left + 'px, ' + ($elem.offset().top - scrollTop) + 'px' + ')'; 3182 cursorOuterEl.style.width = $elem.width() + 'px'; 3183 cursorOuterEl.style.height = $elem.height() + 'px'; 3184 cursorOuterEl.style.marginLeft = 0; 3185 cursorOuterEl.style.marginTop = 0; 3186 magneticFlag = true; 3187 }); 3188 3189 // Cursor - mouse leave 3190 $('body').on('mouseleave', '.rounded-box', function () { 3191 if (anchorHover) { 3192 cursorInnerEl.classList.add('cursor-link-hover'); 3193 cursorOuterEl.classList.add('cursor-link-hover'); 3194 } 3195 3196 cursorOuterEl.style.transition = null; 3197 cursorOuterEl.style.width = null; 3198 cursorOuterEl.style.height = null; 3199 cursorOuterEl.style.marginLeft = null; 3200 cursorOuterEl.style.marginTop = null; 3201 magneticFlag = false; 3202 }); 3203 3204 cursorInnerEl.style.visibility = 'visible'; 3205 cursorOuterEl.style.visibility = 'visible'; 3206 } 3207 } 3208 3209 /* =================================== 3210 Stack animataion 3211 ====================================== */ 3212 3213 stackAnimation(); 3214 var stackLastScroll = 0; 3215 function stackAnimation() { 3216 windowScrollTop = window.pageYOffset || document.documentElement.scrollTop; 3217 $('.stack-box').each(function () { 3218 if ($(window).width() > 1199) { 3219 var _this = $(this); 3220 var stackItems = _this.find('.stack-item'); 3221 if (stackItems.length) { 3222 if (windowScrollTop > stackLastScroll) { 3223 _this.addClass('forward'); 3224 _this.removeClass('reverse'); 3225 } else { 3226 _this.removeClass('forward'); 3227 _this.addClass('reverse'); 3228 } 3229 3230 for (let i = 0; i < stackItems.length - 1; i++) { 3231 var stackBoxHeight = (_this.height() / (_this.find('.stack-item').length)) * i; 3232 var stackTopPosition = _this.offset().top; 3233 if ((windowScrollTop - stackTopPosition) > stackBoxHeight) { 3234 var yMove = windowScrollTop - stackTopPosition - stackBoxHeight; 3235 if (yMove > _this.outerHeight()) { 3236 yMove = _this.outerHeight(); 3237 } 3238 $(stackItems[i]).css({'height': 'calc(100vh - ' + yMove + 'px)'}); 3239 $(stackItems[i]).addClass('active'); 3240 } else { 3241 $(stackItems[i]).css({'height': 'calc(100vh - 0px)'}); 3242 $(stackItems[i]).removeClass('active'); 3243 } 3244 } 3245 } 3246 } else { 3247 $('.stack-box .stack-item').css({'height': 'inherit'}); 3248 } 3249 }); 3250 3251 stackLastScroll = windowScrollTop; 3252 } 3253 $(window).scroll(function () { 3254 stackAnimation(); 3255 }); 3256 3257 /* =================================== 3258 Image tilt 3d effect using atropos 3259 ====================================== */ 3260 3261 var atroposItems = document.querySelectorAll('[data-atropos]') 3262 function initAtropos() { 3263 if (atroposItems.length && $(window).width() > 1199) {
3264 atroposItems.forEach(function (atroposItem) { 3265 var myAtropos = Atropos({ 3266 el: atroposItem 3267 }); 3268 }); 3269 } 3270 } 3271 if (typeof Atropos !== 'undefined' && Atropos !== null) { 3272 initAtropos(); 3273 } 3274 function destroyAtropos() { 3275 if (atroposItems.length && $(window).width() > 1199) { 3276 atroposItems.forEach(function (atroposItem) { 3277 if (atroposItem.__atropos__) { 3278 atroposItem.__atropos__.destroy(); 3279 } 3280 }); 3281 } 3282 } 3283 3284 /* =================================== 3285 Sticky vertical strip - add dark section class 3286 ====================================== */ 3287 3288 var getElementsInArea = (function (docElm) { 3289 var viewportHeight = docElm.clientHeight; 3290 return function (e, opts) { 3291 var found = [], i; 3292 if (e && e.type == 'resize') { 3293 viewportHeight = docElm.clientHeight; 3294 } 3295 for (i = opts.elements.length; i--; ) { 3296 var elm = opts.elements[i], 3297 pos = elm.getBoundingClientRect(), 3298 topPerc = pos.top / viewportHeight * 100, 3299 bottomPerc = pos.bottom / viewportHeight * 100, 3300 middle = (topPerc + bottomPerc) / 2, 3301 inViewport = middle > opts.zone[1] && middle < (100 - opts.zone[1]); 3302 3303 elm.classList.toggle(opts.markedClass, inViewport); 3304 3305 if (inViewport) { 3306 found.push(elm); 3307 } 3308 } 3309 }; 3310 })(document.documentElement); 3311 3312 $(window).on('scroll resize load', function (e) { 3313 getElementsInArea(e, { 3314 elements: document.querySelectorAll('.section-dark'), 3315 markedClass: 'section-dark-highlight', 3316 zone: [10, 10] 3317 }); 3318 if ($('.section-dark-highlight').length > 0) { 3319 $('.sticky-wrap').addClass('sticky-highlight'); 3320 } else { 3321 $('.sticky-wrap').removeClass('sticky-highlight'); 3322 } 3323 }); 3324 3325 $(document).on('appear', 'footer', function (e) { 3326 $('.sticky-wrap').addClass('sticky-hidden'); 3327 }).on('disappear', 'footer', function (e) { 3328 $('.sticky-wrap').removeClass('sticky-hidden'); 3329 }); 3330 3331 /* =================================== 3332 Quantity input 3333 ====================================== */ 3334 3335 $('.qty-plus').click(function () { 3336 var th = $(this).closest('.quantity').find('.qty-text'); 3337 th.val(+th.val() + 1); 3338 }); 3339 $('.qty-minus').click(function () { 3340 var th = $(this).closest('.quantity').find('.qty-text'); 3341 if (th.val() > 1) 3342 th.val(+th.val() - 1); 3343 }); 3344 3345 /* =================================== 3346 Infinite looping animation 3347 ====================================== */ 3348 3349 const wrapperEl = document.querySelector('.looping-wrapper') || false; 3350 const numberOfEls = 100; 3351 const duration = 6000; 3352 const delay = duration / numberOfEls; 3353 3354 let tl = anime.timeline({ 3355 duration: delay, 3356 complete: function () { 3357 tl.restart(); 3358 } 3359 }); 3360 3361 function createEl(i) { 3362 let el = document.createElement('div'); 3363 const rotate = (360 / numberOfEls) * i; 3364 const translateY = -50; 3365 el.classList.add('el'); 3366 el.style.transform = 'rotate(' + rotate + 'deg) translateY(' + translateY + '%)'; 3367 tl.add({ 3368 begin: function () { 3369 anime({ 3370 targets: el, 3371 rotate: [rotate + 'deg', rotate + 10 + 'deg'], 3372 translateY: [translateY + '%', translateY + 10 + '%'], 3373 scale: [1, 1.25], 3374 easing: 'easeInOutSine', 3375 direction: 'alternate', 3376 duration: duration * .1 3377 }); 3378 } 3379 }); 3380 if (wrapperEl) 3381 wrapperEl.appendChild(el); 3382 } 3383 3384 for (let i = 0; i < numberOfEls; i++) 3385 createEl(i); 3386 3387 /* ===================================
3388 Background color change on scroll - Adaptive Backgrounds 3389 ====================================== */ 3390 window.sections = [...document.querySelectorAll('[data-background]')]; 3391 window.lastScrollTop = window.pageYOffset; 3392 let activeSection; 3393 3394 onScroll(); 3395 window.addEventListener('scroll', onScroll); 3396 3397 function onScroll() { 3398 if (window.sections.length > 0) { 3399 const section = window.sections 3400 .map(section => { 3401 const el = section; 3402 const rect = el.getBoundingClientRect(); 3403 return {el, rect}; 3404 }) 3405 .find(section => section.rect.bottom >= (window.innerHeight * 0.5)); 3406 if (section && section.el !== activeSection) { 3407 activeSection = section.el; 3408 const sectionBg = activeSection.getAttribute('data-background'); 3409 activeSection.closest(".page-content").querySelectorAll("[data-background]").forEach(item => item.classList.remove("active")) 3410 activeSection.classList.add("active") 3411 if (typeof gsap !== "undefined") { 3412 gsap.to(activeSection.closest(".page-content"), {backgroundColor: sectionBg}) 3413 } 3414 } 3415 } 3416 } 3417 3418 /* =================================== 3419 Cookies set 3420 ====================================== */ 3421 if (typeof $.cookie === 'function') { 3422 if ($('body').find('#cookies-model').length > 0) { 3423 setTimeout(function () { 3424 var cookieModel = $('#cookies-model'), 3425 cookieConsentclosed = $.cookie('cookieConsent'); 3426 3427 if (cookieConsentclosed == 'closed') { 3428 cookieModel.remove(); 3429 } else { 3430 cookieModel.show(); 3431 } 3432 3433 cookieModel.find('[data-accept-btn]').on('click', function (e) { 3434 e.preventDefault(); 3435 var expiresDays = 1; 3436 cookieModel.remove(); 3437 $.cookie('cookieConsent', 'closed', {expires: expiresDays, path: '/'}); 3438 }); 3439 }, 1000); 3440 } 3441 } 3442 3443 /* =================================== 3444 Back to top scroll 3445 ====================================== */ 3446 $(document).on('click', '.scroll-top', function () { 3447 $('html, body').animate({scrollTop: 0}, 800); 3448 return false; 3449 }); 3450 3451 function scrollIndicator() { 3452 var scrollTop = document.documentElement.scrollTop; 3453 if (scrollTop > 200) { 3454 $('.scroll-progress').addClass('visible'); 3455 } else { 3456 $('.scroll-progress').removeClass('visible'); 3457 } 3458 3459 var scrollHeight = document.documentElement.scrollHeight; 3460 var windowHeight = document.documentElement.clientHeight; 3461 var maxScrollTop = scrollHeight - windowHeight; 3462 var scrollTop = document.documentElement.scrollTop; 3463 var scrollPercentage = (scrollTop / (maxScrollTop - 200)) * 100; 3464 3465 $('.scroll-point').css('height', Math.min(scrollPercentage, 100) + '%'); 3466 3467 /***** Theme demos button scroll to show *****/ 3468 var scrollPos = $(window).scrollTop(); 3469 if (scrollPos > 150) { 3470 $('.theme-demos').fadeIn(600); 3471 } 3472 } 3473 $(window).scroll(function () { 3474 scrollIndicator(); 3475 }); 3476 3477 /* =================================== 3478 Trusted customers 3479 ====================================== */ 3480 3481 $('.bg-more-trusted .btn').click(function (e) { 3482 e.preventDefault(); 3483 $(this).parent().parent().addClass('show-trusted-customers'); 3484 }); 3485 3486 3487 /* =================================== 3488 Theme demo panel 3489 ====================================== */ 3490 3491 //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>'; 3492 //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
3492id-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">
3492 <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">
3492Charity</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
3492dow 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>'; 3493 //$('body:not( .landing-page )').append(themeDemoHTML); 3494 3495 $(document).on('click', '.all-demo', function () { 3496 var themeDemosObj = $(this).parents('.theme-demos'); 3497 if (!themeDemosObj.hasClass('active')) { 3498 themeDemosObj.append(themeDemoData); 3499 themeDemosObj.addClass('active'); 3500 $('body').addClass('overflow-hidden'); 3501 } else { 3502 themeDemosObj.removeClass('active'); 3503 $('body').removeClass('overflow-hidden'); 3504 } 3505 }); 3506 var timer; 3507 $(document).on('click', '.close-popup', function () { 3508 var themeDemosObj = $(this).parents('.theme-demos'); 3509 themeDemosObj.removeClass('active'); 3510 $('body').removeClass('overflow-hidden'); 3511 clearTimeout(timer); 3512 timer = setTimeout(function () { 3513 $('.theme-demos-main').animate({scrollTop: '0'}, 'slow'); 3514 }, 800); 3515 3516 }); 3517 3518 $(document).on('keydown', function (event) { 3519 if (event.key == "Escape") { 3520 var themeDemosObj = $('.theme-demos'); 3521 themeDemosObj.removeClass('active'); 3522 $('body').removeClass('overflow-hidden'); 3523 clearTimeout(timer); 3524 timer = setTimeout(function () { 3525 $('.theme-demos-main').animate({scrollTop: '0'}, 'slow'); 3526 }, 800); 3527 } 3528 }); 3529 3530 $(".all-demo a").click(function (event) { 3531 event.preventDefault(); 3532 }); 3533 3534})(jQuery); 3535 3536 3537/* =================================== 3538ããã¯èªå·±è¿½å ãTOPã¸æ»ããã¿ã³ 3539 ====================================== */ 3540 3541 3542$(function(){ 3543 var pagetop = $('#page-top-new'); 3544 pagetop.hide(); 3545 $(window).scroll(function () { 3546 if ($(this).scrollTop() > 100) { 3547 pagetop.fadeIn(); 3548 } else { 3549 pagetop.fadeOut(); 3550 } 3551 }); 3552 pagetop.click(function () { 3553 $('body, html').animate({ scrollTop: 0 }, 500); 3554 return false; 3555 }); 3556}); 3557 3558 3559 3560 3561 3562 3563 3564 3565/* =================================== 3566 Google map 3567 ====================================== */ 3568 3569function initMap() { 3570 $('.map').each(function (e) { 3571 let _this = $(this), 3572 mapOptions = _this.attr('data-map-options'); 3573 3574 // Convert String into the Json 3575 if (typeof (mapOptions) !== 'undefined' && mapOptions !== null) { 3576 mapOptions = $.parseJSON(mapOptions); 3577 } 3578 3579 let lat = mapOptions.lat ? mapOptions.lat : 19.07, 3580 lng = mapOptions.lng ? mapOptions.lng : 72.87, 3581 marker = mapOptions.marker, 3582 popup = mapOptions.popup; 3583 3584 switch (mapOptions.style && mapOptions.style.toLowerCase()) { 3585 case 'retro': 3586 map_style = Retro 3587 break; 3588 case 'standard': 3589 map_style = Standard 3590 break; 3591 case 'silver': 3592 map_style = Silver 3593 break; 3594 case 'dark': 3595 map_style = Dark 3596 break; 3597 case 'night': 3598 map_style = Night 3599 break; 3600 case 'aubergine': 3601 map_style = Aubergine 3602 break; 3603 default: 3604 map_style = Silver 3605 } 3606 3607 // Google Map variable 3608 const gmap = new google.maps.Map(this, { 3609 zoom: 13, 3610 center: new google.maps.LatLng(lat, lng), 3611 mapTypeId: google.maps.MapTypeId.READMAP, 3612 styles: map_style 3613 }); 3614 3615 // InforWindow variable 3616 const infowindow = new google.maps.InfoWindow({ 3617 content: popup && popup.html, 3618 maxWidth: 300, 3619 }); 3620 infowindow.setPosition(new google.maps.LatLng(lat, lng)); 3621 3622 // Marker Options 3623 if (marker !== null && marker !== undefined) { 3624 // Custom HTML Marker 3625 if (marker.type.toLowerCase() === 'html') { 3626 3627 function HTMLMarker(lat, lng) { 3628 this.lat = lat; 3629 this.lng = lng; 3630 this.pos = new google.maps.LatLng(lat, lng); 3631 } 3632 3633 HTMLMarker.prototype = new google.maps.OverlayView(); 3634 3635 //init html 3636 HTMLMarker.prototype.onAdd = function () { 3637 div = document.createElement('DIV'); 3638 div.className = `arrow_box ${marker.class ? ' ' + marker.class : ''}`; 3639 div.innerHTML = `<span style='background-color: ${marker.color}; border-color: ${marker.color}'></span><span style='background-color: ${marker.color}; border-color: ${marker.color}'></span>`;
3640 div.style.setProperty('background-color', marker.color); 3641 let panes = this.getPanes(); 3642 panes.overlayImage.appendChild(div); 3643 3644 let flag = false; 3645 3646 if (popup.defaultOpen === true) { 3647 flag = true; 3648 infowindow.setOptions({pixelOffset: new google.maps.Size(10, -30)}); 3649 infowindow.open(gmap); 3650 } 3651 3652 google.maps.event.addDomListener(div, "click", function (event) { 3653 if (popup) { 3654 infowindow.setOptions({pixelOffset: new google.maps.Size(10, -30)}); 3655 if (flag === false) { 3656 infowindow.open(gmap); 3657 flag = true; 3658 } else { 3659 infowindow.close(); 3660 flag = false; 3661 } 3662 } 3663 }); 3664 } 3665 3666 HTMLMarker.prototype.draw = function () { 3667 let overlayProjection = this.getProjection(); 3668 let position = overlayProjection.fromLatLngToDivPixel(this.pos); 3669 let panes = this.getPanes(); 3670 panes.overlayImage.style.left = position.x + 'px'; 3671 panes.overlayImage.style.top = position.y - 30 + 'px'; 3672 } 3673 3674 let htmlMarker = new HTMLMarker(lat, lng); 3675 htmlMarker.setMap(gmap); 3676 3677 } else { 3678 // Custom Image Marker 3679 const image_marker = new google.maps.Marker({ 3680 icon: {url: marker.src}, 3681 position: {lat: lat, lng: lng}, 3682 map: gmap, 3683 animation: google.maps.Animation.DROP, 3684 }); 3685 let flag = false; 3686 3687 if (popup.defaultOpen === true) { 3688 infowindow.open({ 3689 anchor: image_marker, 3690 map: gmap 3691 }); 3692 flag = true; 3693 } 3694 3695 image_marker.addListener("click", toggleBounce); 3696 3697 function toggleBounce() { 3698 if (image_marker.getAnimation() !== null) { 3699 image_marker.setAnimation(null); 3700 } else { 3701 image_marker.setAnimation(google.maps.Animation.BOUNCE); 3702 } 3703 3704 if (popup) { 3705 if (flag === false) { 3706 infowindow.open({ 3707 anchor: image_marker, 3708 map: gmap 3709 }); 3710 flag = true; 3711 } else { 3712 infowindow.close(); 3713 flag = false; 3714 } 3715 } 3716 } 3717 } 3718 } else { 3719 // Default Marker 3720 const marker = new google.maps.Marker({ 3721 position: {lat: lat, lng: lng}, 3722 map: gmap 3723 }); 3724 3725 let flag = false; 3726 3727 if (popup.defaultOpen === true) { 3728 infowindow.open({ 3729 anchor: marker, 3730 map: gmap 3731 }); 3732 flag = true; 3733 } 3734 3735 marker.addListener("click", function () { 3736 if (popup) { 3737 if (flag === false) { 3738 infowindow.open({ 3739 anchor: marker, 3740 map: gmap 3741 }); 3742 flag = true; 3743 } else { 3744 infowindow.close(); 3745 flag = false; 3746 } 3747 } 3748 }); 3749 } 3750 }); 3751}
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.