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