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