/* ------------------------------------------------------- Theme Name: Crafto - The Multipurpose HTML5 Template Theme URL: https://craftohtml.themezaa.com/ Description: Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos. Author: ThemeZaa - https://www.themezaa.com/ Author ThemeForest URL: https://themeforest.net/user/themezaa Copyright(c) 2024 themezaa.com Version: 2.0 ------------------------------------------------------- */ (function ($) { "use strict"; /* =================================== Change variables value as per your need ====================================== */ var menuBreakPoint = 991; var sliderBreakPoint = 991; // It will effect when you have used attribute "data-thumb-slider-md-direction" OR "data-slider-md-direction" var animeBreakPoint = 1199; var headerTransition = 300; // Header transition effect time /* =================================== Touch device ====================================== */ var isTouchDevice = (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)); if (isTouchDevice) { $('body').addClass('is-touchable'); } /* =================================== Don't change variables value ====================================== */ var lastScroll = 0, simpleDropdown = 0, linkDropdown = 0, isotopeObjs = [], swiperObjs = []; var windowScrollTop = window.pageYOffset || document.documentElement.scrollTop; /* =================================== Check for browser OS ====================================== */ var isMobile = false, isiPhoneiPad = false, isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { isMobile = true; } if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) { isiPhoneiPad = true; } /* =================================== jQuery appear ====================================== */ $('.vertical-counter, .counter, .progress-bar, .pie-chart-style-01, .attractive-hover, .splitting-animation, .section-dark, footer, [data-anime], [data-fancy-text]').each(function () { $(this).appear().trigger('resize'); }); initScrollNavigate(); slideboxstyle(); animateCounters(); setSpaceInTeamStyle(); setSpaceInInteractiveBannerStyle(); setOverLayerPosition(); setBottomOverLayerPosition(2000); setupSwiper(); /* =================================== Header ====================================== */ // Mobile menu - modern style var mobileStyle = $('body').attr('data-mobile-nav-style'); if ((mobileStyle == 'modern' || mobileStyle == 'full-screen-menu') && !$('.navbar-' + mobileStyle + '-inner').length) { if (!$('.box-layout').length && mobileStyle == 'modern') { $('section, footer').wrapAll('
'); } else { $('section').wrapAll('
'); } $('.navbar .navbar-toggler').clone(true).addClass('navbar-toggler-clone').insertAfter('.page-layout'); $('.navbar .navbar-collapse').clone(true).addClass('navbar-collapse-clone').attr('id', 'navbarNav-clone').insertAfter('.page-layout'); $('.navbar-toggler-clone, .navbar-collapse-clone').wrapAll(''); $('.navbar-toggler').attr('data-target', '#navbarNav-clone').attr('aria-controls', '#navbarNav-clone'); $('.navbar-' + mobileStyle + '-inner').find('.dropdown-toggle').addClass('dropdown-toggle-clone'); if (typeof $.fn.mCustomScrollbar === 'function') { if ($('.navbar-collapse-clone').length) { var scrollOptions = $('.navbar-collapse-clone').attr('data-scroll-options') || '{ "theme": "light" }'; if (typeof (scrollOptions) !== 'undefined' && scrollOptions !== null) { scrollOptions = $.parseJSON(scrollOptions); $('.navbar-collapse-clone').mCustomScrollbar(scrollOptions); } } } if (mobileStyle == 'modern') { $('').insertAfter('.page-layout'); } } // Navbar collapse - classic menu $('.navbar-collapse.collapse').on('show.bs.collapse', function (e) { if (!$('body').hasClass('navbar-collapse-show')) { $('body').addClass('navbar-collapse-show'); $('html').addClass('overflow-hidden'); if ($('body').attr('data-mobile-nav-bg-color') && $('.navbar-modern-inner').length) { var bgColor = $('body').attr('data-mobile-nav-bg-color'); $('.navbar-show-modern-bg').css('background', bgColor); } if ($('body').attr('data-mobile-nav-bg-color') && $('.navbar-full-screen-menu-inner').length) { var bgColor = $('body').attr('data-mobile-nav-bg-color'); $('.navbar-full-screen-menu-inner').css('background', bgColor); } // Set submenu height after opened toggle menu if (getWindowWidth() <= menuBreakPoint) { var windowHeight = getWindowHeight(), headerHeight = getHeaderHeight(); $('header .navbar-collapse').css('max-height', windowHeight - headerHeight); } } else { if ($('.navbar-modern-inner').length) { setTimeout(function () { $('.navbar-show-modern-bg').css('background', ''); }, 600); } if ($('.navbar-full-screen-menu-inner').length) { setTimeout(function () { $('.navbar-full-screen-menu-inner').css('background', ''); }, 600); } } var headerHeight = getHeaderHeight(); var windowHeight = getWindowHeight(); if ($('.navbar-modern-inner').length > 0 || $('.navbar-full-screen-menu-inner').length > 0) { $('.navbar-collapse-clone').css('max-height', windowHeight); } else { $('.navbar-collapse-clone').css('max-height', (windowHeight - headerHeight)); } }).on('hide.bs.collapse', function (e) { if ($('body').hasClass('navbar-collapse-show')) { $('body').removeClass('navbar-collapse-show'); $('html').removeClass('overflow-hidden'); } }); // Sub menu collapse event $('.sub-menu.collapse').on('show.bs.collapse', function (e) { var activeMenuId = $(e.target).attr('id'); $('[data-bs-target="#' + activeMenuId + '"]').addClass('show'); $(this).parents('.menu-item').siblings().each(function () { $('.sub-menu.show', this).collapse('hide'); }); stickyKitRecalc(); }).on('hide.bs.collapse', function (e) { var activeMenuId = $(e.target).attr('id'); $('[data-bs-target="#' + activeMenuId + '"]').removeClass('show'); $(e.target).find('.sub-menu.show').collapse('hide'); stickyKitRecalc(); }); // Search popup open $(document).on('click', '.search-form-icon', function (e) { e.preventDefault(); $('body').addClass('show-search-popup'); }); // Search popup close $(document).on('click', '.search-close', function (e) { e.preventDefault(); $('body').removeClass('show-search-popup'); }); // Search validation $(document).on('click', '.search-button', function () { var error = true; var formObj = $(this).parents('form'); formObj.find('input[type=text]').each(function (index) { var _this = $(this), searchVal = _this.val(); if (searchVal === null || searchVal === '') { formObj.find('input:eq(' + index + ')').addClass('search-error'); error = false; } else { formObj.find('input:eq(' + index + ')').removeClass('search-error'); } }); return error; }); // Header push menu open $(document).on('click', '.header-push-button .push-button', function () { $('html, body').toggleClass('show-menu'); }); // Header push menu close $(document).on('click', '.close-menu', function () { $('html, body').removeClass('show-menu'); // Close left menu $('.sub-menu.show').collapse('hide'); }); // Close all left menu submenu $(document).on('click', '#navbar-menu .navbar-toggler', function () { // Close left menu $('.sub-menu.show').collapse('hide'); }); // Close on outside area $(document).on('click', 'body', function (e) { // Close all menu if (!($(e.target).closest('.navbar-nav').length || $(e.target).closest('.navbar-full-screen-menu-inner').length)) { setTimeout(function () { $('.navbar-collapse.collapse').collapse('hide'); }, 100); } // Close push menu if (!($(e.target).hasClass('push-button') || $(e.target).closest('.push-button').length || $(e.target).closest('.push-menu').length || $(e.target).closest('.hamburger-menu').length)) { $('html, body').removeClass('show-menu'); } // Close search if (!($(e.target).hasClass('search-form') || $(e.target).closest('.search-form-icon').length || $(e.target).closest('.search-form-box').length)) { $('body').removeClass('show-search-popup'); } // Close dropdown menu, language and cart if (!$(e.target).closest('.navbar-nav').length) { if (!$(e.target).closest('.header-language').length) { // Close language menu $('.header-language').trigger('mouseleave'); $('.header-language').removeClass('show'); $('.header-language').children('.dropdown-menu').removeClass('show'); } if (!$(e.target).closest('.header-cart').length) { // Close cart $('.header-cart').trigger('mouseleave'); $('.header-cart').removeClass('show'); $('.header-cart').children('.dropdown-menu').removeClass('show'); } // Close all dropdown $('.navbar-nav .dropdown').each(function () { var _this = $(this); _this.trigger('mouseleave'); _this.removeClass('show'); _this.children('.dropdown-menu').removeClass('show'); }); } else if ($(e.target).parents('body').find('.header-language.open').length) { // Close language menu $('.header-language').trigger('mouseleave'); $('.header-language').removeClass('show'); $('.header-language').children('.dropdown-menu').removeClass('show'); } else if ($(e.target).parents('body').find('.header-cart.open').length) { // Close cart $('.header-cart').trigger('mouseleave'); $('.header-cart').removeClass('show'); $('.header-cart').children('.dropdown-menu').removeClass('show'); } // Close left-modern-header menu if (!$(e.target).closest('.left-modern-header').length) { $(".left-modern-header").collapse('hide'); } }); // Close on escape key $(document).on('keydown', function (e) { if (e.keyCode === 27) { // Close all menu $('.navbar-collapse.collapse').collapse('hide'); // Close left menu $('#navbar-menu').collapse('hide'); // Close push menu $('html, body').removeClass('show-menu'); // Close search $('body').removeClass('show-search-popup'); // Close left-modern-header menu $(".left-modern-header").collapse('hide'); } }); // Header submenu on hover $('.nav-item.submenu').on('mouseenter touchstart', function (e) { var _this = $(this), colorAttr = $('header nav').attr('data-header-hover'); if (getWindowWidth() > menuBreakPoint) { if ($(e.target).siblings('.dropdown-menu').length) { e.preventDefault(); } if (colorAttr == 'light') { $('header nav').addClass('submenu-light').removeClass('submenu-dark'); } else if (colorAttr == 'dark') { $('header nav').addClass('submenu-dark').removeClass('submenu-light'); } } }).on('mouseleave', function (e) { var _this = $(this); $('header nav').removeClass('submenu-light').removeClass('submenu-dark'); }); // Open menu on hover $('.dropdown').on('mouseenter touchstart', function (e) { var _this = $(this); _this.siblings('.dropdown').removeClass('open'); _this.parents('.navbar-nav').siblings('.navbar-nav').find('.dropdown').removeClass('open'); if (getWindowWidth() >= menuBreakPoint) { if (_this.hasClass('open') && _this[0] == $(e.target).parent()[0]) { let href = $(_this).find('.nav-link').attr('href'); if (href != 'undefined' && href.indexOf('javascript') === -1 && typeof undefined !== typeof href && href != '#') { window.location.href = href; } } } _this.addClass('open'); menuPosition(_this); if (getWindowWidth() > menuBreakPoint) { if ($(e.target).siblings('.dropdown-menu').length) { e.preventDefault(); } // Header color remove click on simple dropdown menu if ($(e.target).hasClass('simple-dropdown') || $(e.target).closest('.simple-dropdown').length) { $('header nav').removeClass('submenu-light').removeClass('submenu-dark'); } } }).on('mouseleave', function (e) { var _this = $(this); _this.removeClass('menu-left'); _this.removeClass('open'); }); // Add active class to current menu var pgurl = window.location.href.substr(window.location.href.lastIndexOf('/') + 1); var $hash = window.location.hash.substring(1); if ($hash) { $hash = '#' + $hash; pgurl = pgurl.replace($hash, ''); } else { pgurl = pgurl.replace('#', ''); } $('.navbar-nav li a, .menu-item-list a').each(function () { var _this = $(this), aHref = _this.attr('href'); if (aHref === pgurl || aHref === pgurl + '.html') { _this.parent().addClass('active'); _this.parents('li.dropdown').addClass('active'); _this.parents('li.menu-item').addClass('active'); } }); // Sticky left menu if ($.fn.stick_in_parent !== undefined && $.fn.stick_in_parent !== null) { if ($('.left-sidebar-wrapper').length) { $('.left-sidebar-wrapper .left-sidebar-nav').stick_in_parent({ recalc: 1 }); } } if (typeof $.fn.smoothScroll === 'function') { if ($('.header-reverse').length > 0) { $('.inner-link').smoothScroll({ speed: 800, offset: -59, beforeScroll: function () { if ($('body').hasClass('left-menu-onepage')) { $('.left-modern-header').collapse('hide'); } $('.navbar-collapse.collapse').collapse('hide'); } }); } else { if ($('.inner-link').length > 0) { var offset = 0 if ($('nav.navbar').hasClass('disable-fixed')) { offset = 1; } if ($('.left-modern-menu').hasClass('left-menu-onepage')) { if (getWindowWidth() <= menuBreakPoint) { offset = -59; } } $('.inner-link').smoothScroll({ speed: 800, offset: offset, beforeScroll: function () { if ($('body').hasClass('left-menu-onepage')) { $('.left-modern-header').collapse('hide'); } if ($('body').hasClass('show-menu')) { $('html, body').removeClass('show-menu'); } $('.navbar-collapse.collapse').collapse('hide'); } }); } } // Section link if ($('.section-link').length > 0) { $('.section-link').smoothScroll({ speed: 900, offset: 1, beforeScroll: function () { $('.navbar-collapse.collapse').collapse('hide'); } }); } } $('.modern-side-menu .menu-item').on('click', function () { $('.modern-side-menu .menu-item').removeClass('active'); $(this).addClass('active'); }); // Get top space header height function getHeaderHeight() { var headerHeight = 0; if ($('.header-top-bar').length) { headerHeight = headerHeight + $('.header-top-bar').outerHeight(); } if ($('header nav.navbar').length) { headerHeight = headerHeight + $('header nav.navbar').outerHeight(); } if ($('.left-modern-header .left-modern-sidebar').length) { headerHeight = headerHeight + $('.left-modern-header .left-modern-sidebar').outerHeight(); } return headerHeight; } // Get top space height function setTopSpaceHeight() { if (!$('header').hasClass('sticky') && ($('.top-space-margin').length || $('.top-space-padding').length) || $('.ipad-top-space-margin').length) { var headerHeight = getHeaderHeight(); if ($('.top-space-margin').length) { $('.top-space-margin').css('margin-top', headerHeight); } if ($('.top-space-padding').length) { $('.top-space-padding').css('padding-top', headerHeight); } if ($('.ipad-top-space-margin').length) { if (getWindowWidth() <= menuBreakPoint) { $('.ipad-top-space-margin').css('margin-top', headerHeight); } else { $('.ipad-top-space-margin').css('margin-top', 'inherit'); } } } } // Menu position function menuPosition(element) { var windowWidth = getWindowWidth(); if (element.hasClass('simple-dropdown')) { simpleDropdown = element; linkDropdown = element.find('a.nav-link'); var menuSpacing = 30, menuLeftPosition = element.offset().left, menuWidth = element.children('.dropdown-menu').outerWidth(), menuDropdownCSS = (windowWidth - menuSpacing) - (menuLeftPosition + menuWidth); if (menuDropdownCSS < 0) { element.children('.dropdown-menu').css('left', menuDropdownCSS); } } if (element.parent().hasClass('dropdown-menu') && element.parents('.simple-dropdown')) { var dropdownWidth = 0, maxValueInArray = 0, lastValue = 0, multiDepth = 0; dropdownWidth = element.outerWidth() - linkDropdown.outerWidth(); element.children('.dropdown-menu').each(function () { var arr = []; if (element.find('li').hasClass('dropdown')) { dropdownWidth = dropdownWidth + element.outerWidth(); element.find('li.dropdown').each(function () { var dropdownMenu = element.closest('.dropdown-menu'); arr.push(dropdownMenu.outerWidth()); }); maxValueInArray = lastValue + Math.max.apply(Math, arr); lastValue = maxValueInArray; dropdownWidth = dropdownWidth + maxValueInArray; multiDepth = multiDepth + 1; } else if (multiDepth < 1) { dropdownWidth = dropdownWidth + element.outerWidth(); } }); var menuRightPosition = windowWidth - (simpleDropdown.offset().left + simpleDropdown.outerWidth()); if (dropdownWidth > menuRightPosition) { if (element.find('.dropdown-menu').length > 0) { var menuTopPosition = element.position().top, submenuObj = element.find('.dropdown-menu'), submenuHeight = submenuObj.outerHeight(), totalHeight = menuTopPosition + submenuHeight + getHeaderHeight(), windowHeight = getWindowHeight(); if (totalHeight > windowHeight) { submenuObj.css('top', '-' + (totalHeight - windowHeight) + 'px'); } } element.addClass('menu-left'); } } } // Recalculate sticky kit function stickyKitRecalc() { if ($('.left-sidebar-wrapper').length) { setTimeout(function () { $('.left-sidebar-wrapper').trigger('sticky_kit:recalc'); }, 500); } } // Without link $('.nav-item .nav-link').on('click',function(e) { var submenuLenth = $(this).closest('.dropdown').find('.dropdown').length; if ( $( window ).width() < 992 && $(this).closest('.dropdown').length > 0 ) { var HasClass = $(this).closest('.nav-item').find( '.dropdown-menu' ).hasClass ('show'); if ($(this).closest('.nav-item').find( '.dropdown-menu' ).hasClass ('show')) { $(this).closest('.nav-item').find( '.dropdown-menu' ).removeClass('show') $(this).closest('.nav-item').find( '.dropdown-toggle' ).removeClass('show') } else{ $( '.navbar-nav' ).find( '.dropdown-menu' ).removeClass('show'); $( '.navbar-nav' ).find( '.dropdown-toggle' ).removeClass('show'); $(this).closest('.nav-item').find( '.dropdown-menu' ).addClass('show') $(this).closest('.nav-item').find( '.dropdown-toggle' ).addClass('show') } } }); $(window).resize( function () { if ( $( window ).width() > 991 ) { $( '.navbar-nav' ).find( '.dropdown-menu' ).removeClass('show'); $( '.navbar-nav' ).find( '.dropdown-toggle' ).removeClass('show'); } }); /* =================================== Custom scrollbar ====================================== */ if (typeof $.fn.mCustomScrollbar === 'function') { $('[data-scroll-options]').each(function () { var _this = $(this); var scrollOptions = _this.data('scroll-options') || '{"theme": "dark"}'; try { _this.mCustomScrollbar(scrollOptions); } catch (error) { console.error('Error parsing scroll options:', error); } }); } /* =================================== Portfolio ====================================== */ // Portfolio isotope filter if (typeof imagesLoaded === 'function') { $('.portfolio-wrapper, .shop-wrapper').each(function () { var _this = $(this); _this.imagesLoaded(function () { _this.removeClass('grid-loading'); if (typeof $.fn.isotope === 'function') { var _thisIsotop = _this.isotope({ layoutMode: 'masonry', itemSelector: '.grid-item', percentPosition: true, stagger: 0, masonry: { columnWidth: '.grid-sizer', } }); } isotopeObjs.push(_this); // Filter default on load if (typeof $.fn.isotope === 'function') { var currentPortfolioActive = $('.portfolio-filter > li.active > a').attr('data-filter'); if (currentPortfolioActive != '' && currentPortfolioActive != undefined) { _this.isotope({filter: currentPortfolioActive}); } } }); _this.on('arrangeComplete', function () { reInitSkrollr(); }); $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) { _this.isotope({transitionDuration: 0}); }); }); } $(document).on('click', '.portfolio-filter > li > a', function () { var _this = $(this), parentSectionObj = _this.parents('section'); parentSectionObj.find('.portfolio-filter > li').removeClass('active'); _this.parent().addClass('active'); var selector = _this.attr('data-filter'), portfolioFilter = parentSectionObj.find('.portfolio-wrapper'); portfolioFilter.find('.grid-item[data-anime]').addClass('appear'); if (typeof portfolioFilter.isotope === 'function') { portfolioFilter.isotope({filter: selector}); } if (parentSectionObj.length && $(parentSectionObj).hasClass('overlap-height')) { setOverLayerPosition(); } return false; }); // Reset isotope loop function resetIsotopeLayoutLoop(isotopeObjs, removeAnimation) { for (var i = 0; i < isotopeObjs.length; i++) { if (isotopeObjs[i].data('isotope')) { isotopeObjs[i].isotope('layout'); } } ; } // Horizontal portfolio const ThreeDLetterMenuEffect = () => { $(".threeD-letter-menu .menu-item").each(function () { let _self = this, MenuLink = _self.querySelector(".menu-item-text"), MenuText = MenuLink.querySelector("span"), imgHeight = _self.querySelector(".hover-reveal").clientHeight, imgWidth = _self.querySelector(".hover-reveal").clientWidth, windowHeight = window.innerHeight, windowWidth = window.innerWidth; MenuLink.innerHTML = `${MenuText.innerHTML}${MenuText.innerHTML}` MenuLink.querySelectorAll("span").forEach(function (item) { item.setAttribute("data-splitting", true); Splitting(); }); _self.addEventListener("mouseenter", function () { anime({ targets: _self.querySelector(".hover-reveal"), opacity: [0, 1], duration: 1000, easing: "easeOutQuad" }) anime({ targets: _self.querySelector(".hover-reveal__inner"), scale: [0.5, 1], easing: "easeOutQuad" }) anime({ targets: _self.querySelector(".hover-reveal__img"), scale: [2, 1], easing: "easeOutQuad" }) }) _self.addEventListener("mouseleave", function () { anime({ targets: _self.querySelector(".hover-reveal"), opacity: 0, duration: 1000, easing: "easeOutQuad" }) anime({ targets: _self.querySelector(".hover-reveal__inner"), scale: [1, 0.5], easing: "easeOutQuad" }) anime({ targets: _self.querySelector(".hover-reveal__img"), scale: [1, 2], easing: "easeOutQuad" }) }) if (typeof TweenLite !== "undefined") { document.addEventListener("mousemove", function (e) { let posX = e.clientX + 20, posY = e.clientY + 20; TweenLite.to(_self.querySelector(".hover-reveal"), .6, { x: posX + imgWidth > windowWidth ? e.clientX - imgWidth : posX, y: posY + imgHeight > windowHeight ? e.clientY - imgHeight : posY, }) }) } }); } ThreeDLetterMenuEffect(); // Minimal portfolio const sticky_container = document.querySelector(".sticky-image-distortion-wrapper"); if (typeof (sticky_container) != 'undefined' && sticky_container != null) { let winsize; const calcWinsize = () => winsize = {width: window.innerWidth, height: window.innerHeight}; calcWinsize(); window.addEventListener('resize', calcWinsize); class Menu { constructor() { this.DOM = { menu: document.querySelector('.sticky-image-distortion-wrapper nav.menu') }; this.DOM.menuLinks = [...this.DOM.menu.querySelectorAll('.menu__link')]; this.mousePos = {x: winsize.width / 2, y: winsize.height / 2}; this.lastMousePos = { translation: {x: winsize.width / 2, y: winsize.height / 2}, displacement: {x: 0, y: 0} }; this.dmScale = 0; this.current = -1; this.initEvents(); requestAnimationFrame(() => this.render()); } initEvents() { document.body.style.setProperty('--body-bgcolor', this.DOM.menuLinks[0].getAttribute("data-bg")) let active_item; this.DOM.menuLinks.forEach((item, i) => { let imgPath = item.getAttribute('data-img'); let bgColor = item.getAttribute('data-bg'); item.querySelector(".svg-wrapper").innerHTML = ` ` const displaceMentEl = [...item.querySelectorAll('feDisplacementMap')] item.addEventListener('mouseenter', (e) => { item.closest(".menu").childNodes.forEach(item => item.classList && item.classList.remove("active")) item.classList.add("active"); if (typeof TweenMax !== 'undefined' && typeof TweenMax !== null) { if (item !== active_item) { TweenMax.fromTo(displaceMentEl, 1.2, {attr: {scale: 50}}, {attr: {scale: 0.3}}); } } document.body.style.setProperty('--body-bgcolor', bgColor) active_item = item; }); item.addEventListener('mouseleave', (e) => { active_item = item; }) }); } render() { requestAnimationFrame(() => this.render()); } } new Menu(); } /* =================================== Blog ====================================== */ // Blog isotope filter if (typeof imagesLoaded === 'function') { $('.blog-wrapper').each(function () { var _this = $(this); _this.imagesLoaded(function () { _this.removeClass('grid-loading'); if (typeof $.fn.isotope === 'function') { _this.isotope({ layoutMode: 'masonry', itemSelector: '.grid-item', percentPosition: true, stagger: 0, masonry: { columnWidth: '.grid-sizer', } }); } isotopeObjs.push(_this); var currentBlogActive = $('.blog-filter > li.active > a').attr('data-filter'); if (currentBlogActive != '' && currentBlogActive != undefined) { _this.isotope({filter: currentBlogActive}); } }); }); } $(document).on('click', '.blog-filter > li > a', function () { var _this = $(this), parentSectionObj = _this.parents('section'); parentSectionObj.find('.blog-filter > li').removeClass('active'); _this.parent().addClass('active'); var selector = _this.attr('data-filter'), blogFilter = parentSectionObj.find('.blog-wrapper'); blogFilter.find('.grid-item[data-anime]').addClass('appear'); blogFilter.isotope({filter: selector}); return false; }); // blog hover box $('.box-hover').on('mouseenter', function (e) { $(this).find('.hover-text').slideDown(400); }).on('mouseleave', function (e) { $(this).find('.hover-text').slideUp(400); }); /* =================================== Image gallery ====================================== */ // Image gallery isotope filter if (typeof imagesLoaded === 'function') { $('.gallery-wrapper').each(function () { var _this = $(this); _this.imagesLoaded(function () { _this.removeClass('grid-loading'); if (typeof $.fn.isotope === 'function') { _this.isotope({ layoutMode: 'masonry', itemSelector: '.grid-item', percentPosition: true, stagger: 0, masonry: { columnWidth: '.grid-sizer', } }); } isotopeObjs.push(_this); }); }); } // Group gallery light box if (typeof $.fn.magnificPopup === 'function') { var lightboxgallerygroups = {}; $('.portfolio-box [data-group], .gallery-box [data-group]').each(function () { var id = $(this).attr('data-group'); if (!lightboxgallerygroups[id]) { lightboxgallerygroups[id] = []; } lightboxgallerygroups[id].push(this); }); $.each(lightboxgallerygroups, function () { $(this).magnificPopup({ type: 'image', closeOnContentClick: true, closeBtnInside: false, gallery: {enabled: true} }); }); } /* =================================== Justified gallery ====================================== */ if (typeof imagesLoaded === 'function') { if ($('.justified-gallery').length) { $('.justified-gallery').each(function () { var _this = $(this), justifiedOptions = _this.attr('data-justified-options') || '{ "rowHeight": 400, "maxRowHeight": false, "captions": true, "margins": 10, "waitThumbnailsLoad": true }'; if (typeof $.fn.justifiedGallery !== 'undefined') { if (typeof (justifiedOptions) !== 'undefined' && justifiedOptions !== null) { _this.imagesLoaded(function () { justifiedOptions = $.parseJSON(justifiedOptions); _this.justifiedGallery(justifiedOptions); }); } } }); } } /* =================================== Accordion ====================================== */ $('.accordion').each(function () { var _this = $(this), activeIconClass = _this.attr('data-active-icon') || '', inactiveIconClass = _this.attr('data-inactive-icon') || ''; $('.collapse', this).on('show.bs.collapse', function () { var id = $(this).attr('id'); $('a[data-bs-target="#' + id + '"]').closest('.accordion-header').parent('.accordion-item').addClass('active-accordion'); $('a[data-bs-target="#' + id + '"] i').addClass(activeIconClass).removeClass(inactiveIconClass); }).on('hide.bs.collapse', function () { var id = $(this).attr('id'); $('a[data-bs-target="#' + id + '"]').closest('.accordion-header').parent('.accordion-item').removeClass('active-accordion'); $('a[data-bs-target="#' + id + '"] i').addClass(inactiveIconClass).removeClass(activeIconClass); }); }); // Accordion on checkout page $('.checkout-accordion label input').on('click', function (e) { var collapseId = $(this).parent().find('a').attr('href'); if ($(this).prop("checked")) { $(collapseId).collapse('show'); } else { $(collapseId).collapse('hide'); } }); /* =================================== Progress bar ====================================== */ if ($('.progress-bar').length) { $(document).on('appear', '.progress-bar', function (e) { if (!$(this).hasClass('appear')) { $(this).addClass('appear'); var total = $(this).attr('aria-valuenow'), delay = 300; $(this).animate({'width': total + '%'}, { duration: delay, easing: "swing", progress: function (animation, progress, msRemaining) { var counter = parseInt(total * progress); $(this).find('span').html(counter + '%'); } }); } }); } $('[data-tab="review-tab"]').on('shown.bs.tab', function (e) { $('.progress-bar').each(function () { $(this).appear().trigger('resize'); }); }); /* =================================== Pie charts ====================================== */ // Pie charts style 01 if ($('.pie-chart-style-01').length) { if (typeof $.fn.easyPieChart === 'function') { var color1, color2; $(document.body).on('appear', '.pie-chart-style-01', function (e) { $('.pie-chart-style-01').easyPieChart({ trackColor: '#232323', scaleColor: "", lineCap: 'round', lineWidth: 10, size: 180, barColor: function () { color1 = $(this.el).attr('data-start-color') || $(this.el).attr('data-bar-color') || "#000"; color2 = $(this.el).attr('data-end-color') || $(this.el).attr('data-bar-color') || "#000"; var ctx = this.renderer.getCtx(); var canvas = this.renderer.getCanvas(); var gradient = ctx.createLinearGradient(0, 0, canvas.width, 270); gradient.addColorStop(0.2, color1); gradient.addColorStop(0, color2); return gradient; }, animate: { duration: 2000, enabled: true }, onStep: function (from, to, percent) { $(this.el).find('.percent').text(Math.round(percent) + '%'); } }); }); } } /* =================================== Mousetip on mouse move ====================================== */ if (!isMobile) { $(document).on('mousemove', '.mousetip-wrapper', function (e) { var mouseX = e.pageX - $(this).offset().left + 20; var mouseY = e.pageY - $(this).offset().top + 20; $(this).find('.caption').show().css({ top: mouseY, left: mouseX }); }); } /* =================================== Counter ====================================== */ // Vertical counter $('.vertical-counter').each(function () { var _this = $(this), counterValue = _this.attr('data-to'), individualValue = counterValue.toString().split(''), valueLength = counterValue.length; // Adding the div.vertical-counter-number in div.counter multiple(valueLength) times for (var i = 0; i < valueLength; i++) { _this.append(''); } // Adding the individual data-to in each div.vertical-counter-number _this.find('.vertical-counter-number').each(function (index) { $(this).attr('data-to', individualValue[index]); }); }); // Vertical counter on jQuery appear if ($('.vertical-counter').length) { function calculateHeight() { $('.vertical-counter').each(function () { var _this = $(this), divHeight = _this.find('.vertical-counter-number').find('li').height(); $(this).height(divHeight); }); } calculateHeight(); $(window).resize(function () { calculateHeight(); }) $(document).on('appear', '.vertical-counter', function (e) { if (!$(this).hasClass('appear')) { $(this).addClass('appear'); if ($(window).scrollTop() + getWindowHeight() >= $('.vertical-counter').offset().top) { $(this).find('.vertical-counter-number').each(function () { var _this = $(this), value = _this.attr('data-to'); if (value <= 9) { anime({ targets: this.querySelector('ul'), translateY: [0, `${-value * 10}%`], duration: 2000, easing: 'easeOutCubic' }); } }); } } }); $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) { let activeTabPane = $(`${$(this).attr('href')}`); activeTabPane.find('.vertical-counter').each(function () { var _this = $(this), value = _this.attr('data-to'), divHeight = _this.find('li').height(); _this.height(divHeight); if (value <= 9) { _this.find('ul').css({'transform': 'translateY(-' + value * 10 + '%)'}); } }); }); } $('[data-tab="counter"]').on('shown.bs.tab', function (e) { $('.vertical-counter').each(function () { $(this).appear().trigger('resize'); }); }); // Counter number reset on jQuery appear if (typeof $.fn.countTo === 'function' && $('.counter').length) { $(document).on('appear', '.counter', function (e) { var _this = $(this); if (!_this.hasClass('appear')) { var options = _this.data('countToOptions') || {}; _this.countTo(options); _this.addClass('appear'); } }); } // Counter function animateCounters() { $('.counter').each(function (options) { var _this = $(this); options = $.extend({}, options || {}, _this.data('countToOptions') || {}); if (typeof $.fn.countTo === 'function') { _this.countTo(options); } }); } /* =================================== Sliding box ====================================== */ function slideboxstyle() { $('.sliding-box').each(function (index, value) { var valueObj = $(value), totalWidth = valueObj.outerWidth(), slidingLength = valueObj.find('.sliding-box-item').length, devideRightPadding = parseInt(valueObj.css('padding-right')) / slidingLength, devideLeftPadding = parseInt(valueObj.css('padding-left')) / slidingLength, usageWidth = (slidingLength * 30) + 30 + devideRightPadding + devideLeftPadding, useWidth = totalWidth - usageWidth, devideLength = slidingLength + 1, devideWidth = (useWidth / devideLength), activeWidth = devideWidth * 2; valueObj.find('.sliding-box-item, .sliding-box-img, .sliding-box-item .sliding-box-content').css('width', devideWidth); valueObj.find('.sliding-box-item .sliding-box-content').css('left', devideWidth); valueObj.find('.sliding-box-item.active').css('width', activeWidth); $(document).on('mouseenter', '.sliding-box .sliding-box-item', function () { $(this).siblings().removeClass('active'); $(this).addClass('active'); valueObj.find('.sliding-box-item, .sliding-box-img, .sliding-box-item .sliding-box-content').css('width', devideWidth); valueObj.find('.sliding-box-item .sliding-box-content').css('left', devideWidth); valueObj.find('.sliding-box-item.active').css('width', activeWidth); }); }); } /* =================================== Team ====================================== */ // Team style 01 function setSpaceInTeamStyle() { $('.team-style-01').each(function () { let _this = $(this), figure = _this.find('figure'), figcaption = _this.find('figcaption'); setTimeout(function () { figure.css({'padding-bottom': figcaption.outerHeight()}); }, 200); }); } /* =================================== Interactive banner ====================================== */ // Interactive banner style 02 function setSpaceInInteractiveBannerStyle() { $('.interactive-banner-style-02').each(function () { let _this = $(this), figure = _this.find('figure'), figcaption = _this.find('figcaption'); setTimeout(function () { figure.css({'padding-bottom': figcaption.outerHeight()}); }, 500); }); } /* =================================== Video ====================================== */ // Video player in background $(document).on('click', '.html-video-play', function () { var $videoBg = $(this).parents('section').find('.video-bg'); if ($(this).is('[playing]') === false) { $videoBg.trigger('play'); $(this).attr('playing', 'true'); $(this).parents('section').find('.video-play-icon').addClass('remove-play-icon'); } else { $videoBg.trigger('pause'); $(this).removeAttr('playing'); $(this).parents('section').find('.video-play-icon').removeClass('remove-play-icon'); } }); // Fit video if (typeof $.fn.fitVids === 'function') { $('.fit-videos').fitVids(); } /* =================================== Countdown timer ====================================== */ if ($.fn.countdown !== undefined && $.fn.countdown !== null) { $('.countdown').each(function () { var _this = $(this); _this.countdown(_this.attr("data-enddate")).on('update.countdown', function (event) { _this.html(event.strftime('' + '
%-D
Days
' + '
%H
Hours
' + '
%M
Minutes
' + '
%S
Seconds
')); }).on('finish.countdown', function (event) { _this.html(event.strftime('' + '
00
Days
' + '
00
Hours
' + '
00
Minutes
' + '
00
Seconds
')); }); }); } /* =================================== Anime - animation library ====================================== */ // Anime animation function animeAnimation(target, options) { let child = target; let staggerValue = options.staggervalue || 0; let delay = options.delay || 0; let anime_animation = anime.timeline(); function applyTransitionStyles(elements) { for (let i = 0; i < elements.length; i++) { const element = elements[i]; element.style.transition = 'none'; if (options.willchange) { element.style.willChange = 'transform'; } } } if (options.el === "childs") { child = target.children; applyTransitionStyles(target.children); } if (options.el === "lines") { function lineSplitting() { const lines = Splitting({target: target, by: 'lines'}); const line = lines[0].lines.map(item => item.map(i => i.innerHTML).join(" ")); target.innerHTML = line.map(item => `${item}`).join(' '); } lineSplitting(); applyTransitionStyles(target.children); child = target.children; } if (options.el === "words") { function lineSplitting() { const words = Splitting({target: target, by: 'words'}); const word = words[0].words.join(" "); } lineSplitting(); applyTransitionStyles(target.children); child = target.children; } if (options.perspective) { target.style.perspective = `${options.perspective}px`; } if (options.willchange) { target.style.willChange = options.willchange; } anime_animation.add({ targets: child, ...options, delay: anime.stagger(staggerValue, {start: delay}), complete: function () { if (options.el) { target.classList.add('anime-child'); target.classList.add('anime-complete'); for (let i = 0; i < target.children.length; i++) { const element = target.children[i]; element.style.removeProperty('opacity'); element.style.removeProperty('transform'); element.style.removeProperty('transition'); if (target.classList.contains('grid')) { element.style.transition = 'none'; } } if (options.el === "lines") { for (let i = 0; i < target.children.length; i++) { const element = target.children[i]; element.classList.remove('d-inline-flex'); element.classList.add('d-inline'); element.style.willChange = "inherit"; } } } else { target.classList.add('anime-complete'); target.style.removeProperty('opacity'); target.style.removeProperty('transform'); target.style.removeProperty('transition'); } } }); } const $dataAnimeElements = $('[data-anime]:not(.swiper [data-anime])'); $dataAnimeElements.each(function () { const $self = $(this); const animeOptions = $self.data('anime'); if (animeOptions && getWindowWidth() > animeBreakPoint) { try { const effect = animeOptions.effect && animeOptions.effect.toLowerCase(); $self.on('appear', function () { if (!$self.hasClass('appear')) { $self.addClass('appear'); if (effect === 'slide') { slideAnimation(this, animeOptions); } else { animeAnimation(this, animeOptions); } } if ($self.hasClass('grid')) { $self.find('.grid-sizer').removeAttr('style'); } }); } catch (error) { console.error('Error parsing anime options:', error); } } else { $self.removeAttr('data-anime'); $("body").addClass("no-animation"); } }); // Anime text revealer js const slideAnimation = (target, options) => { let duration = options.speed ? options.speed : 100, direction = options.direction ? options.direction : "lr", delay = options.delay ? options.delay : 0; target.style.position = 'relative'; // Create slide panel div let tmp = document.createElement('div'); tmp.style.width = tmp.style.height = '100%'; tmp.style.top = tmp.style.left = 0; tmp.style.background = options.color ? options.color : '#fff'; tmp.style.position = 'absolute'; if (direction === 'lr') { tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 50%'; tmp.style.WebkitTransform = tmp.style.transform = 'scaleX(0)'; } else if (direction === 'tb') { tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '50% 0%'; tmp.style.WebkitTransform = tmp.style.transform = 'scaleY(0)'; } else if (direction === 'bt') { tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 100%'; tmp.style.WebkitTransform = tmp.style.transform = 'scaleY(0)'; } else { tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 50%'; tmp.style.WebkitTransform = tmp.style.transform = 'scaleX(0)'; } target.appendChild(tmp); // init Anime js. let slide_anime = anime.timeline(); slide_anime.add({ targets: tmp, scaleX: (direction === 'lr' || direction === 'rl') ? [0, 1] : [1, 1], scaleY: (direction === 'tb' || direction === 'bt') ? [0, 1] : [1, 1], duration: duration + 500, easing: 'easeInOutCubic', delay: delay, complete: function () { if (direction === 'lr') { tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 50%'; } else if (direction === 'tb') { tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '50% 100%'; } else if (direction === 'bt') { tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 0%'; } else { tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 50%'; } anime({ targets: tmp, duration: duration + 500, easing: 'easeInOutCubic', scaleX: (direction === 'lr' || direction === 'rl') ? [1, 0] : [1, 1], scaleY: (direction === 'tb' || direction === 'bt') ? [1, 0] : [1, 1], complete: function () { target.removeChild(tmp); if (typeof callback === 'function') { callback(); } } }); } }).add({ targets: target.querySelector('*'), easing: 'easeOutQuint', delay: direction === 'lr' ? anime.stagger(duration, {start: 1000}) : anime.stagger(-duration, {start: 1000}), opacity: [0, 1] }, "-=900"); } /* =================================== Fancy text animation ====================================== */ // Curved text effect const curvedTextAnimation = (target, options) => { let duration = options.duration ? (options.duration <= 2000 ? 2000 : options.duration) : 2000, content = options.string, curveText = anime.timeline(); const lineEq = (y2, y1, x2, x1, currentVal) => { var m = (y2 - y1) / (x2 - x1), b = y1 - m * x1; return m * currentVal + b; } curveText.add({ targets: target.querySelectorAll('.anime-text > .word > .char'), duration: 800, easing: 'easeOutElastic', opacity: 1, translateY: function (el, index) { var p = el.parentNode, lastElOffW = p.lastElementChild.offsetWidth, firstElOffL = p.firstElementChild.offsetLeft, w = p.offsetWidth - lastElOffW - firstElOffL - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft), tyVal = lineEq(0, 100, firstElOffL + w / 2, firstElOffL, el.offsetLeft); return [Math.abs(tyVal) + '%', '0%']; }, rotateZ: function (el, index) { var p = el.parentNode, lastElOffW = p.lastElementChild.offsetWidth, firstElOffL = p.firstElementChild.offsetLeft, w = p.offsetWidth - lastElOffW - p.firstElementChild.offsetLeft - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft), rz = lineEq(90, -90, firstElOffL + w, firstElOffL, el.offsetLeft); return [rz, 0]; } }).add({ targets: target.querySelectorAll('.anime-text > .word > .char'), duration: 1000, easing: 'easeInExpo', opacity: content.length > 1 ? 0 : 1, translateY: function (el, index) { var p = el.parentNode, lastElOffW = p.lastElementChild.offsetWidth, firstElOffL = p.firstElementChild.offsetLeft, w = p.offsetWidth - lastElOffW - firstElOffL - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft), tyVal = lineEq(0, 100, firstElOffL + w / 2, firstElOffL, el.offsetLeft); return content.length > 1 ? [-Math.abs(tyVal) + '%'] : [Math.abs(tyVal) + '%', '0%']; }, rotateZ: function (el, index) { var p = el.parentNode, lastElOffW = p.lastElementChild.offsetWidth, firstElOffL = p.firstElementChild.offsetLeft, w = p.offsetWidth - lastElOffW - p.firstElementChild.offsetLeft - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft), rz = lineEq(-90, 90, firstElOffL + w, firstElOffL, el.offsetLeft); return content.length > 1 ? [rz] : [rz, 0]; } }, duration - 1500); } // Slide text effect const slideTextAnimation = (target, options) => { let current_anime_text = target.querySelectorAll('.anime-text')[0], speed = options.speed ? options.speed : 100; current_anime_text.style.position = 'relative'; // Create slide panel div let tmp = document.createElement('div'); tmp.style.width = tmp.style.height = '100%'; tmp.style.top = tmp.style.left = 0; tmp.style.background = options.color ? options.color : '#fff'; tmp.style.position = 'absolute'; tmp.style.WebkitTransform = tmp.style.transform = 'scaleX(0)'; tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 50%'; if (options.direction === 'left') { tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 50%'; } current_anime_text.appendChild(tmp); // init Anime js. let slide_anime = anime.timeline(); slide_anime.add({ targets: current_anime_text.querySelectorAll('div'), scaleX: [0, 1], duration: speed + 500, easing: 'easeInOutCubic', complete: function () { if (options.direction === 'left') { tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 50%'; } else { tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 50%'; } anime({ targets: tmp, duration: speed + 500, easing: 'easeInOutCubic', scaleX: [1, 0], complete: function () { current_anime_text.removeChild(tmp); if (typeof callback === 'function') { callback(); } } }); } }).add({ targets: target.querySelectorAll('.anime-text > .word > .char'), easing: 'easeOutQuint', delay: options.direction === 'left' ? anime.stagger(speed, {start: 1000}) : anime.stagger(-speed, {start: 1000}), opacity: [0, 1], translateX: options.direction === 'left' ? [100, 0] : [-100, 0] }, "-=600"); } // Wave text effect const waveTextAnimation = (target, options) => { let duration = options.duration ? options.duration : 3000, direction = options.direction, content = options.string, speed = options.speed, waveText = anime.timeline(); waveText.add({ targets: target.querySelectorAll('.anime-text > .word > .char'), opacity: [0, 1], translateY: direction === 'down' ? [-20, 0] : [20, 0], delay: anime.stagger(speed ? speed : 50) }).add({ targets: target.querySelectorAll('.anime-text .word .char'), opacity: content.length > 1 ? [1, 0] : [1, 1], translateY: content.length > 1 ? (direction === 'down' ? [0, 20] : [0, -20]) : [0, 0], delay: anime.stagger(speed ? speed : 50, {start: duration - 1500}) }); } // Smooth wave text effect const smoothWaveTextAnimation = (target, options) => { let duration = options.duration ? options.duration : 3000, direction = options.direction, content = options.string, speed = options.speed, smoothWaveText = anime.timeline(); smoothWaveText.add({ targets: target.querySelectorAll('.anime-text > .word > .char'), opacity: [0, 1], translateY: direction === 'down' ? [-50, 0] : [50, 0], duration: 500, easing: 'easeOutQuad', delay: anime.stagger(speed ? speed : 40, {direction: 'reverse'}), }).add({ targets: target.querySelectorAll('.anime-text .word .char'), opacity: content.length > 1 ? [1, 0] : [1, 1], translateY: content.length > 1 ? (direction === 'down' ? 50 : -50) : 0, duration: 500, easing: 'easeOutQuad', delay: anime.stagger(speed ? speed : 40, {start: duration - 1000, direction: 'reverse'}) }); } // Rotate text effect const rotateTextAnimation = (target, options) => { let duration = options.duration ? options.duration : 3000, content = options.string, speed = options.speed, rotateText = anime.timeline(); rotateText.add({ targets: target.querySelectorAll('.anime-text > .word > .char'), opacity: [0, 1], rotateX: [-70, 0], duration: 150, delay: anime.stagger(speed ? speed : 50), easing: "linear" }).add({ targets: target.querySelectorAll('.anime-text > .word > .char'), opacity: content.length > 1 ? 0 : 1, rotateX: content.length > 1 ? [0, 70] : [0, 0], duration: 150, delay: anime.stagger(speed ? speed : 50, {start: duration - 1500}), easing: "linear" }); } // Jump text effect const jumpTextAnimation = (target, options) => { let duration = options.duration ? options.duration : 3000, content = options.string, speed = options.speed, delay = options.delay, movingLetter9 = anime.timeline(); movingLetter9.add({ targets: target.querySelectorAll('.anime-text > .word > .char'), scale: [0, 1], duration: 1500, elasticity: 600, transformOrigin: '50% 100%', delay: anime.stagger(speed ? speed : 45, {start: delay}) }).add({ targets: target.querySelectorAll('.anime-text > .word > .char'), opacity: content.length > 1 ? 0 : 1, scale: content.length > 1 ? 0 : 1, duration: 500, easing: "easeOutExpo", delay: anime.stagger(speed ? speed : 45) }, `+=${duration - 2300}`); } // Zoom text effect const zoomTextAnimation = (target, options) => { let duration = options.duration ? options.duration : 3000, content = options.string, speed = options.speed, movingLetter2 = anime.timeline(); movingLetter2.add({ targets: target.querySelectorAll('.anime-text > .word > .char'), scale: [4, 1], opacity: [0, 1], translateZ: 0, easing: "easeOutExpo", duration: 950, delay: anime.stagger(speed ? speed : 70) }).add({ targets: target.querySelectorAll('.anime-text > .word'), opacity: content.length > 1 ? 0 : 1, duration: 1000, easing: "easeOutExpo", delay: 1000 }, `+=${duration - 2500}`); } // Rubber band text effect const rubberbandTextAnimation = (target, options) => { let duration = options.duration ? options.duration : 3000, content = options.string, speed = options.speed, direction = options.direction, rubberband = anime.timeline(); rubberband.add({ targets: target.querySelectorAll('.anime-text > .word > .char'), translateX: direction === "right" ? [-40, 0] : [40, 0], translateZ: 0, opacity: [0, 1], easing: "easeOutExpo", duration: 1200, delay: anime.stagger(speed ? speed : 75, {direction: direction === "right" ? 'reverse' : 'normal'}) }).add({ targets: target.querySelectorAll('.anime-text > .word > .char'), translateX: content.length > 1 ? (direction === "left" ? -40 : 40) : 0, opacity: content.length > 1 ? 0 : 1, easing: "easeInExpo", duration: 500, delay: anime.stagger(speed ? speed : 75, {start: duration - 2500, direction: direction === "right" ? 'reverse' : 'normal'}) }); } // Fade text effect const fadeTextAnimation = (target, options) => { let duration = options.duration ? options.duration : 3000, content = options.string, speed = options.speed, fade = anime.timeline(); fade.add({ targets: target.querySelectorAll('.anime-text > .word > .char'), translateY: [100, 0], translateZ: 0, opacity: [0, 1], easing: "easeOutExpo", delay: anime.stagger(speed ? speed : 30) }).add({ targets: target.querySelectorAll('.anime-text > .word > .char'), translateY: content.length > 1 ? [0, -100] : [0, 0], opacity: content.length > 1 ? [1, 0] : [1, 1], easing: "easeInExpo", delay: anime.stagger(speed ? speed : 40, {start: duration - 3000}) }); } // Fancy text function FancyTextDefault(item, ftOptions) { let text_effect = ftOptions.effect, duration = ftOptions.duration ? ftOptions.duration : 3000, content = ftOptions.string, speed = ftOptions.speed, delay = ftOptions.delay; if (content) { item.innerHTML = `${content[0]}`; item.querySelector('.anime-text').setAttribute('data-splitting', true); Splitting(); if (getWindowWidth() > animeBreakPoint) { switch (text_effect) { case 'wave': waveTextAnimation(item, ftOptions); break; case 'smooth-wave': smoothWaveTextAnimation(item, ftOptions); break; case 'curve': curvedTextAnimation(item, ftOptions); break; case 'rotate': rotateTextAnimation(item, ftOptions); break; case 'slide': slideTextAnimation(item, ftOptions); break; case 'jump': jumpTextAnimation(item, ftOptions); break; case 'zoom': zoomTextAnimation(item, ftOptions); break; case 'rubber-band': rubberbandTextAnimation(item, ftOptions); break; case 'fade': fadeTextAnimation(item, ftOptions); break; default: } if (text_effect === undefined) { anime({ targets: item.querySelectorAll('.anime-text > .word > .char'), ...ftOptions, delay: anime.stagger(speed ? speed : 0, {start: delay ? delay : 0}) }) } } if (content.length > 1) { let counter = 1; setInterval(function () { let new_el = document.createElement('span'); new_el.classList.add('anime-text'); new_el.innerHTML = content[counter]; new_el.setAttribute('data-splitting', true); item.querySelector('.anime-text').replaceWith(new_el); Splitting(); counter++; if (counter === content.length) { counter = 0; } switch (text_effect) { case 'wave': waveTextAnimation(item, ftOptions); break; case 'smooth-wave': smoothWaveTextAnimation(item, ftOptions); break; case 'curve': curvedTextAnimation(item, ftOptions); break; case 'rotate': rotateTextAnimation(item, ftOptions); break; case 'slide': slideTextAnimation(item, ftOptions); break; case 'jump': jumpTextAnimation(item, ftOptions); break; case 'zoom': zoomTextAnimation(item, ftOptions); break; case 'rubber-band': rubberbandTextAnimation(item, ftOptions); break; case 'fade': fadeTextAnimation(item, ftOptions); break; default: } if (text_effect === undefined) { anime({ targets: item.querySelectorAll('.anime-text > .word > .char'), ...ftOptions, delay: anime.stagger(speed ? speed : 0, {start: delay ? delay : 0}) }); } }, duration); } } } $('[data-fancy-text]').each(function () { const _this = $(this); const ftOptions = _this.data('fancy-text'); if (ftOptions) { if (_this.hasClass('swiper-parallax-fancy-text')) { FancyTextDefault(this, ftOptions); } else { _this.on('appear', function () { if (!_this.hasClass('appear')) { _this.addClass('appear'); FancyTextDefault(this, ftOptions); } }); } } }); /* =================================== Instagram feed ====================================== */ var instagramWrapperItems = document.querySelectorAll('.instafeed-wrapper'); instagramWrapperItems.forEach(function (instagramWrapperItem) { var token = 'IGQWRPSWZAleS1CRk5UR2dqcWhkam5lTFZAQQUxmQU9MLTgzVi11WjYzY0NVSS10UlVSR195aWxMZAnh5cC1OZAUdFUlFLRnV0M0hFR19pcnhXOU1MZAi1UQTYzZAHl2NmVGVzA1ZAE5pZAllHMGdDaFZA5bFBzUzUxeWF2NVkZD', _this = $(instagramWrapperItem), token = _this.attr('data-token') || token, total = _this.attr('data-total') || '6', // how much photos do you want to get slider = _this.attr('data-slider-options'), _html = _this.html(), outputHTML = ''; if (typeof (slider) !== 'undefined' && slider !== null) { _this.html(''); } $.ajax({ url: 'https://graph.instagram.com/me/media?fields=id,media_type,media_url,timestamp,permalink&access_token=' + token, type: 'GET', success: function (response) { outputHTML += _this.find('.grid-item').length ? '
  • ' : ''; for (var x in response.data) { if (x < parseInt(total)) { if (response.data[x]['media_type'] == 'IMAGE' || response.data[x]['media_type'] == 'CAROUSEL_ALBUM') { console.log('image'); var link = response.data[x]['permalink'] || '', image = response.data[x]['media_url'] || '', likes = response.data[x]['like_count'] || '', comments = response.data[x]['comments_count'] || '', output = _html; output = output.replace(' href="#"', ''); output = output.replace(' src="#"', ''); output = output.replace('data-href', 'href'); output = output.replace('data-src', 'src'); output = output.replace('{{link}}', link); output = output.replace('{{image}}', image); output = output.replace('{{likes}}', likes); output = output.replace('{{comments}}', comments); output = output.replace( '{{image-class}}', 'image' ); outputHTML += output; }else if( response.data[x]['media_type'] == 'VIDEO' ){ var link = response.data[x]['permalink'] || '', video = response.data[x]['media_url'] || ''; output = output.replace( '{{video}}', video ); output = output.replace( '{{video-class}}', 'video' ); outputHTML += output; } } } _this.html(outputHTML); if (typeof (slider) !== 'undefined' && slider !== null) { // Apply swiper var sliderOptions = $.parseJSON(slider); var swiperObj = instagramWrapperItem.parentElement; if (typeof Swiper === 'function') { new Swiper(swiperObj, sliderOptions); } } else { // Apply isotope _this.imagesLoaded(function () { _this.removeClass('grid-loading'); if (typeof $.fn.isotope === 'function') { _this.isotope({ layoutMode: 'masonry', itemSelector: '.grid-item', percentPosition: true, stagger: 0, masonry: { columnWidth: '.grid-sizer', } }); } isotopeObjs.push(_this); }); } }, error: function (data) { var output = '
    No Images Found
    '; _this.append(output); } }); }); /* =================================== Subscribe popup on page load ====================================== */ if (typeof $.fn.magnificPopup === 'function') { if ($('#subscribe-popup').length > 0) { let delaySecond = 1.5, expireDays = 30, cookieName = 'crafto-promo-popup'; if (getCookie(cookieName) != 'shown') { setTimeout(function () { $.magnificPopup.open({ showCloseBtn: false, items: { src: '#subscribe-popup' }, type: 'inline', mainClass: 'my-mfp-zoom-in', callbacks: { close: function () { if ($('#newsletter-off').is(':checked')) { setCookie(cookieName, 'shown', expireDays); } } } }); }, (delaySecond * 3500)); } } } /* =================================== Magnific popup ====================================== */ if (typeof $.fn.magnificPopup === 'function') { // Modal popup $('.modal-popup').magnificPopup({ type: 'inline', preloader: false, blackbg: true }); // Modal popup close $(document).on('click', '.popup-modal-dismiss', function (e) { e.preventDefault(); $.magnificPopup.close(); }); // Modal popup - zoom animation $('.popup-with-zoom-anim').magnificPopup({ type: 'inline', fixedContentPos: false, fixedBgPos: true, overflowY: 'auto', closeBtnInside: true, preloader: false, midClick: true, removalDelay: 300, blackbg: true, mainClass: 'my-mfp-zoom-in' }); // Modal popup - move animation $('.popup-with-move-anim').magnificPopup({ type: 'inline', fixedContentPos: false, fixedBgPos: true, overflowY: 'auto', closeBtnInside: true, preloader: false, midClick: true, removalDelay: 300, blackbg: true, mainClass: 'my-mfp-slide-bottom' }); // Modal popup - slide up animation $('.slide-up-animation').magnificPopup({ type: 'inline', fixedContentPos: false, fixedBgPos: true, overflowY: 'auto', closeBtnInside: true, preloader: false, midClick: true, removalDelay: 300, blackbg: true, mainClass: 'my-mfp-slide-up' }); // Popup with form $('.popup-with-form').magnificPopup({ type: 'inline', preloader: false, fixedContentPos: true, focus: '#name', callbacks: { beforeOpen: function () { if ($(window).width() < 700) { this.st.focus = false; } else { this.st.focus = '#name'; } } } }); // Video magnific popup $('.popup-youtube, .popup-vimeo, .popup-googlemap').magnificPopup({ disableOn: 320, type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: true, closeBtnInside: false }); // Ajax magnific popup $('.ajax-popup').magnificPopup({ type: 'ajax', alignTop: true, fixedContentPos: true, closeBtnInside: false, overflowY: 'scroll', // as we know that popup content is tall we set scroll overflow by default to avoid jump callbacks: { open: function () { $('.navbar .collapse').removeClass('show'); $('.navbar a.dropdown-toggle').addClass('collapsed'); } } }); } /* =================================== Contact form validation ====================================== */ // Contact form validation on submit $(document).on('click', '.submit', function () { var error = false, _this = $(this), formObj = _this.parents('form'), emailFormat = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/, urlformat = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/, telFormat = /[0-9 -()+]+$/, actionURL = formObj.attr('action'), resultsObj = formObj.find('.form-results'), grecaptchav3= _this.attr( 'data-sitekey' ) || '', redirectVal = formObj.find('[name="redirect"]').val(); formObj.find('.required').removeClass('is-invalid'); formObj.find('.required').each(function () { var __this = $(this), fieldVal = __this.val(); if (fieldVal == '' || fieldVal == undefined) { error = true; __this.addClass('is-invalid'); } else if (__this.attr('type') == 'email' && !emailFormat.test(fieldVal)) { error = true; __this.addClass('is-invalid'); } else if (__this.attr('type') == 'url' && !urlformat.test(fieldVal)) { error = true; __this.addClass('is-invalid'); } else if (__this.attr('type') == 'tel' && !telFormat.test(fieldVal)) { error = true; __this.addClass('is-invalid'); } }); var termsObj = formObj.find('.terms-condition'); if (termsObj.length) { if (!termsObj.is(':checked')) { error = true; termsObj.addClass('is-invalid'); } } // Google reCaptcha verify if ( typeof ( grecaptcha ) !== 'undefined' && grecaptcha !== null ) { if (formObj.find('.g-recaptcha').length) { var gResponse = grecaptcha.getResponse(); if (!(gResponse.length)) { error = true; formObj.find('.g-recaptcha').addClass('is-invalid'); } } else if( grecaptchav3 != '' && grecaptchav3 != undefined ) { // For Version 3 grecaptcha.ready(function() { grecaptcha.execute(grecaptchav3, {action: 'submit'}).then(function(token) { }); }); } } if (!error && actionURL != '' && actionURL != undefined) { _this.addClass('loading'); $.ajax({ type: 'POST', url: actionURL, data: formObj.serialize(), success: function (result) { _this.removeClass('loading'); if (redirectVal != '' && redirectVal != undefined) { window.location.href = redirectVal; } else { if (typeof (result) !== 'undefined' && result !== null) { result = $.parseJSON(result); } formObj.find('input[type=text],input[type=url],input[type=email],input[type=tel],input[type=password],textarea').each(function () { $(this).val(''); $(this).removeClass('is-invalid'); }); formObj.find('.g-recaptcha').removeClass('is-invalid'); formObj.find('input[type=checkbox],input[type=radio]').prop('checked', false); if (formObj.find('.g-recaptcha').length) { grecaptcha.reset(); } resultsObj.removeClass('alert-success').removeClass('alert-danger').hide(); resultsObj.addClass(result.alert).html(result.message); resultsObj.removeClass('d-none').fadeIn('slow').delay(4000).fadeOut('slow'); } } }); } return false; }); // Contact form validation on blur $(document).on('blur', '.required', function () { var emailFormat = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/, telFormat = /[0-9 -()+]+$/, urlformat = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/, fieldVal = $(this).val(); if (fieldVal == '' || fieldVal == undefined) { $(this).addClass('is-invalid'); } else if ($(this).attr('type') == 'email' && !emailFormat.test(fieldVal)) { $(this).addClass('is-invalid'); } else if ($(this).attr('type') == 'url' && !urlformat.test(fieldVal)) { $(this).addClass('is-invalid'); } else if ($(this).attr('type') == 'tel' && !telFormat.test(fieldVal)) { $(this).addClass('is-invalid'); } else { $(this).removeClass('is-invalid').addClass('is-valid'); } }); // Validate terms and conditions in form $(document).on('click', '.terms-condition', function () { var termsObj = $(this); if (!termsObj.is(':checked')) { termsObj.addClass('is-invalid'); } else { termsObj.removeClass('is-invalid').addClass('is-valid'); } }); /* =================================== Revolution slider ====================================== */ // Reinit skroller after revolution slider loaded if ($('.rev_slider').length) { $('.rev_slider').each(function () { $(this).one('revolution.slide.onloaded', function () { reInitSkrollr(); }); }); } /* =================================== Window on load ====================================== */ $(window).on('load', function () { // Bootstrap tooltip var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); }); // Parallax if (typeof $.fn.parallax !== 'undefined' && typeof $.fn.parallax !== null) { setParallax(); } // Non retina image code $("img:not([data-at2x])").each(function () { $(this).attr('data-no-retina', ''); }); // Page loader if ($('.page-loader').length) { $('.page-loader').fadeOut(); } // Reset isotope loop resetIsotopeLayoutLoop(isotopeObjs, false); // Top overlap section position setOverLayerPosition(); // Bottom overlap section position setBottomOverLayerPosition(); // Set full screen height & top space setTimeout(function () { fullScreenHeight(); setTopSpaceHeight(); }, headerTransition); // Header transition effect time }); /* =================================== Page loader ====================================== */ $(window).on("load", function () { $('.page-loader').show(); setTimeout(function () { $('.page-loader').hide(); }, 1000); }); /* =================================== Window resize ====================================== */ $(window).resize(function () { slideboxstyle(); setParallax(); initScrollNavigate(); setOverLayerPosition(); setBottomOverLayerPosition(100); setSpaceInInteractiveBannerStyle(); // Update custom scrollbar for full screen & modern menu if ($('.navbar-collapse-clone').length && typeof $.fn.mCustomScrollbar === 'function') { $('.navbar-collapse-clone').mCustomScrollbar('update'); } // Reset isotope if (!isMobile) { setTimeout(function () { resetIsotopeLayoutLoop(isotopeObjs, true); }, 300); } if ($(window).width() <= 1199) { destroyAtropos(); destroySkrollr(); } else { if (typeof Atropos !== 'undefined' && typeof Atropos !== null) { initAtropos(); } initSkrollr(); } }); /* =================================== Window orientation change ====================================== */ $(window).on('orientationchange', function (e) { // Top overlap section position setOverLayerPosition(); // Bottom overlap section position setBottomOverLayerPosition(); // Set full screen height & top space setTimeout(function () { fullScreenHeight(); setTopSpaceHeight(); }, headerTransition); // Header transition effect time // Close all menu $('.navbar-collapse.collapse').collapse('hide'); // Close push menu $('html, body').removeClass('show-menu'); // Close search $('body').removeClass('show-search-popup'); // Header color remove $('header nav').removeClass('submenu-light').removeClass('submenu-dark'); // Close all dropdown menu $('.dropdown').trigger('mouseleave'); // Close left submenu $('.sub-menu.show').collapse('hide'); // Close left simple menu $('.left-sidebar-header').collapse('hide'); stickyKitRecalc(); // Close left modern menu $('.left-modern-header').collapse('hide'); }); /* =================================== Window scroll ====================================== */ $(window).on('scroll', initScrollNavigate); // Window scroll Function function initScrollNavigate() { var scrollPos = $(window).scrollTop(); // One page navigation var menuLinks = $('.navbar-nav li a'); menuLinks.each(function () { var _this = $(this); var hasPos = _this.attr('href').indexOf('#'); if (hasPos > -1) { var res = _this.attr('href').substring(hasPos); if (res != '' && res != '#' && $(res).length) { var refElement = $(_this.attr('href')); if (refElement.position().top <= (scrollPos + 60) && refElement.position().top + refElement.height() > (scrollPos + 60)) { menuLinks.removeClass('active'); _this.addClass('active'); } if (scrollPos < 1) { _this.removeClass('active'); } } } }); // Sticky nav Start var navHeight = 0, miniHeaderHeight = 0; if ($('header nav.navbar').length) { navHeight = $('header nav.navbar').outerHeight(); } if ($('.header-top-bar').length) { miniHeaderHeight = $('.header-top-bar').outerHeight(); } var headerHeight = navHeight + miniHeaderHeight; if (!$('header').hasClass('no-sticky')) { if (scrollPos >= headerHeight) { $('header').addClass('sticky'); if (!$('.header-top-bar').is(':hidden')) { $('.header-top-bar').css({'top': '-' + (miniHeaderHeight) + 'px'}); $('.header-top-bar + .navbar').css({'top': '0px'}); } else { $('.header-top-bar, .header-top-bar + .navbar').css({'top': ''}); } } else if (scrollPos <= headerHeight) { $('header').removeClass('sticky'); if (!$('.header-top-bar').is(':hidden')) { $('.header-top-bar').css({'top': '0px'}); $('.header-top-bar + .navbar').css({'top': (miniHeaderHeight) + 'px'}); } else { $('.header-top-bar, .header-top-bar + .navbar').css({'top': ''}); } } } // Header sticky if (scrollPos > (headerHeight + 150)) { setTimeout(function () { $('header').addClass('sticky-active'); }, headerTransition); // Header transition effect time } if (scrollPos < headerHeight) { setTimeout(function () { $('header').removeClass('sticky-active'); }, headerTransition); // Header transition effect time } // Hide side menu on scroll if (scrollPos >= 200 && getWindowWidth() > menuBreakPoint) { // Close all dropdown menu $('.dropdown').trigger('mouseleave'); } // Scroll to top if (scrollPos > 150) { $('.scroll-top-arrow').fadeIn('300'); } else { $('.scroll-top-arrow').fadeOut('300'); } if ( $( 'nav.header-reverse-back-scroll' ).length > 0 ) { var st = scrollPos; if ( st > lastScroll ) { st = st - 1; $( 'header' ).removeClass( 'sticky-appear' ); } else { $('header').addClass('sticky-appear'); } lastScroll = st; if ( lastScroll <= headerHeight ) { $( 'header' ).removeClass( 'sticky-appear' ); } } // Set full screen height & top space if (scrollPos <= 0) { setTimeout(function () { fullScreenHeight(); setTopSpaceHeight(); }, headerTransition); // Header transition effect time } lastScroll = scrollPos; } /* =================================== Utility functions start ====================================== */ // Check formatted number function pad(d) { return (d < 10) ? '0' + d.toString() : d.toString(); } // Check IE browser function isIE() { var ua = window.navigator.userAgent, msie = ua.indexOf('MSIE '); if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) { return true; } else { return false; } return false; } // Get window height function getWindowHeight() { return $(window).height(); } // Get window width function getWindowWidth() { return $(window).width(); } // Full screen function fullScreenHeight() { var fullScreenObj = $('.full-screen'), minHeight = getWindowHeight(), headerHeight = getHeaderHeight(); if (!$('header').hasClass('sticky')) { fullScreenObj.parents('section').imagesLoaded(function () { if ($('section:first.full-screen, section:first .full-screen').length && ($('.top-space-margin').length || $('.mobile-top-space').length) || $('.ipad-top-space-margin').length) { if ($('.ipad-top-space-margin').length) { if (getWindowWidth() <= menuBreakPoint) { $('section:first.full-screen, section:first .full-screen').css('height', minHeight - headerHeight); } else { $('section:first.full-screen, section:first .full-screen').css('height', minHeight); } } else { $('section:first.full-screen, section:first .full-screen').css('height', minHeight - headerHeight); } } else if ($('header nav.navbar').hasClass('top-space-margin') || $('header nav.navbar').hasClass('mobile-top-space')) { if ($('header nav.navbar').hasClass('ipad-top-space-margin')) { if (getWindowWidth() <= menuBreakPoint) { minHeight = minHeight - $('header nav.navbar').outerHeight(); } } else { minHeight = minHeight - $('header nav.navbar').outerHeight(); } fullScreenObj.css('height', minHeight); } else { fullScreenObj.css('height', minHeight); } }); } } // Get cookie function getCookie(cname) { var name = cname + "="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } // Set cookie function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); var expires = (exdays != 0 && exdays != '') ? d.toUTCString() : 0; document.cookie = cname + "=" + cvalue + ";expires=" + expires + ";path=/"; } /* =================================== Swiper slider ====================================== */ // Setup swiper slider function setupSwiper() { // Swiper slider using params var swipers = document.querySelectorAll('[data-slider-options]:not(.instafeed-wrapper)'); swipers.forEach(function (swiperItem) { var _this = $(swiperItem), sliderOptions = _this.attr('data-slider-options'); if (typeof (sliderOptions) !== 'undefined' && sliderOptions !== null) { sliderOptions = $.parseJSON(sliderOptions); // If user have provided "data-slide-change-on-click" attribute then below code will execute var changeOnClick = _this.attr('data-slide-change-on-click'); if (changeOnClick != '' && changeOnClick != undefined && changeOnClick == '1') { sliderOptions['on'] = { click: function () { if (this.activeIndex > this.clickedIndex) { this.slidePrev(); } else if (this.activeIndex < this.clickedIndex) { this.slideNext(); } } }; } /* If user have provided "data-thumb-slider-md-direction" attribute then below code will execute */ if (sliderOptions['thumbs'] != '' && sliderOptions['thumbs'] != undefined) { var mdThumbDirection = _this.attr('data-thumb-slider-md-direction'); if (mdThumbDirection != '' && mdThumbDirection != undefined) { var thumbDirection = (sliderOptions['thumbs']['swiper']['direction'] != '' && sliderOptions['thumbs']['swiper']['direction'] != undefined) ? sliderOptions['thumbs']['swiper']['direction'] : mdThumbDirection; sliderOptions['thumbs']['swiper']['on'] = { init: function () { if (getWindowWidth() <= sliderBreakPoint) { this.changeDirection(mdThumbDirection); } else { this.changeDirection(thumbDirection); } this.update(); }, resize: function () { if (getWindowWidth() <= sliderBreakPoint) { this.changeDirection(mdThumbDirection); } else { this.changeDirection(thumbDirection); } this.update(); }, click: function () { /* Product thumbs automatic next / previous on click slide */ if (this.activeIndex == this.clickedIndex) { this.slidePrev(); } else { this.slideNext(); } } }; } } // If user have provided "data-number-pagination" attribute then below code will execute var numberPagination = _this.attr('data-number-pagination'); if (numberPagination != '' && numberPagination != undefined && numberPagination == '1' && sliderOptions['pagination'] != '' && sliderOptions['pagination'] != undefined) { sliderOptions['pagination']['renderBullet'] = function (index, className) { return '' + pad(index + 1) + ''; } } // If user have provided "data-thumbs" attribute then below code will execute var dataThumbs = _this.attr('data-thumbs'); if (dataThumbs != '' && dataThumbs != undefined && sliderOptions['pagination'] != '' && sliderOptions['pagination'] != undefined) { dataThumbs = $.parseJSON(dataThumbs); if (typeof (dataThumbs) !== 'undefined' && dataThumbs !== null) { sliderOptions['pagination']['renderBullet'] = function (index, className) { return ''; } } } sliderOptions['on'] = { init: function () { let slides = this.slides; let activeIndex = this.activeIndex, current_slide = this.slides[activeIndex], anime_el = current_slide.querySelectorAll('[data-anime]'), fancy_el = current_slide.querySelectorAll('[data-fancy-text]'); if (getWindowWidth() > animeBreakPoint) { if (anime_el) { anime_el.forEach(element => { let options = element.getAttribute('data-anime'); if (typeof (options) !== 'undefined' && options !== null) { options = $.parseJSON(options); element.classList.add('appear'); element.style.transition = "none"; if (options.el) { for (let i = 0; i < element.children.length; i++) { element.children[i].style.transition = "none"; element.children[i].classList.add('appear'); } } animeAnimation(element, options); element.classList.remove('appear'); } }); } } }, slideChange: function () { // Get active slide let slides = this.slides; let activeIndex = this.activeIndex, current_slide = this.slides[activeIndex], anime_el = current_slide.querySelectorAll('[data-anime]'), fancy_el = current_slide.querySelectorAll('[data-fancy-text]'); if (getWindowWidth() > animeBreakPoint) { if (fancy_el) { fancy_el.forEach(element => { element.classList.add('appear'); let fancy_options = element.getAttribute('data-fancy-text'); if (typeof (fancy_options) !== 'undefined' && fancy_options !== null) { fancy_options = $.parseJSON(fancy_options); let child = element; FancyTextDefault(child, fancy_options); element.classList.remove('appear'); } }); } if (anime_el) { anime_el.forEach(element => { let options = element.getAttribute('data-anime'); if (typeof (options) !== 'undefined' && options !== null) { options = $.parseJSON(options); element.classList.add('appear'); element.style.transition = "none"; if (options.el) { for (let i = 0; i < element.children.length; i++) { element.children[i].style.transition = "none"; element.children[i].classList.add('appear'); } } animeAnimation(element, options); element.classList.remove('appear'); } }); } } } }; // If swiper has number navigation var isNumberPagination = _this.attr('data-swiper-number-line-pagination') || false; var isNumberNavigation = _this.attr('data-swiper-number-navigation') || false; var isNumberPaginationProgress = _this.attr('data-swiper-number-pagination-progress') || false; var showProgress = _this.attr('data-swiper-show-progress') || false; var hasGalleryBox = _this.attr('data-gallery-box') || false; if (isNumberPagination || isNumberNavigation || isNumberPaginationProgress || hasGalleryBox) { sliderOptions['on'] = { init: function () { if (isNumberPagination || isNumberNavigation || isNumberPaginationProgress) { if (sliderOptions.hasOwnProperty('loop') && sliderOptions['loop']) { var slideLength = this.slides.length; } var length = slideLength; if (isNumberPaginationProgress) { _this.parent().find('.number-next').text('0' + length); _this.parent().find('.number-prev').text('01'); _this.parent().find('.swiper-pagination-progress')[0].style.setProperty('--swiper-progress', (100 / length).toFixed(2) + '%'); } else { _this.parent().find('.number-next').text('02'); _this.parent().find('.number-prev').text('0' + length); if (showProgress) _this.parent().find('.swiper-pagination-progress')[0].style.setProperty('--swiper-progress', (100 / length).toFixed(2) + '%'); } } if (typeof $.fn.magnificPopup === 'function') { if (hasGalleryBox) { _this.magnificPopup({ delegate: 'a', type: 'image', closeOnContentClick: true, closeBtnInside: false, gallery: {enabled: true} }); } } }, slideChange: function () { if (isNumberPagination || isNumberNavigation || isNumberPaginationProgress) { if (sliderOptions.hasOwnProperty('loop') && sliderOptions['loop']) { var slideLength = this.slides.length; } var length = this.slides.length, active = (this.realIndex) + 1, next = active + 1, prev = active - 1; if (active == 1) { prev = length; } if (active == length) { next = 1; } if (isNumberPaginationProgress) { _this.parent().find('.number-prev').each(function () { $(this).text(active < 10 ? '0' + active : active); }); _this.parent().find('.swiper-pagination-progress')[0].style.setProperty('--swiper-progress', ((100 / length) * active).toFixed(2) + '%'); } else { _this.parent().find('.number-next').each(function () { $(this).text(next < 10 ? '0' + next : next); }); _this.parent().find('.number-prev').each(function () { $(this).text(prev < 10 ? '0' + prev : prev); }); if (showProgress) _this.parent().find('.swiper-pagination-progress')[0].style.setProperty('--swiper-progress', ((100 / length) * active).toFixed(2) + '%'); } } } } } // Move thumb slide on click in product page. var thumbClick = _this.attr('data-swiper-thumb-click') || false; if (thumbClick && sliderOptions.hasOwnProperty('thumbs')) { sliderOptions['thumbs']['swiper']['on'] = { click: function (swiper) { if (swiper.activeIndex >= swiper.clickedIndex) { swiper.slidePrev(); } else if (swiper.activeIndex < swiper.clickedIndex) { swiper.slideNext(); } } } } if (typeof Swiper === 'function') { _this.imagesLoaded(function () { var swiperObj = new Swiper(swiperItem, sliderOptions); swiperObjs.push(swiperObj); }); } } }); } /* =================================== Parallax background ====================================== */ function setParallax() { if (!isIE()) { if (typeof $.fn.parallax !== 'undefined' && typeof $.fn.parallax !== null) { $('[data-parallax-background-ratio]').each(function () { var ratio = $(this).attr('data-parallax-background-ratio') || 0.5; $(this).parallax('50%', ratio); }); $('[data-parallax-layout-ratio]').each(function () { var ratio = $(this).attr('data-parallax-layout-ratio') || 1; $(this).parallaxImg(ratio); }); } $('[data-parallax-liquid]').each(function () { var scale = $(this).attr('data-parallax-scale') || 0; var scaleFraction = parseFloat($(this).attr('data-parallax-scale-fraction')); var reverse = $(this).attr('data-parallax-reverse') ? $(this).attr('data-parallax-reverse') : false; var parallaxTransition = parseFloat($(this).attr('data-parallax-transition')) ? parseFloat($(this).attr('data-parallax-transition')) : 1.5; if (typeof $.fn.parallaxLiquidImg !== 'undefined' && typeof $.fn.parallaxLiquidImg !== null) { $(this).parallaxLiquidImg(parallaxTransition, parseFloat(scale), scaleFraction, reverse); } }); } } /* =================================== Overlap section ====================================== */ // Top overlap section position function setOverLayerPosition() { if (($('.overlap-section').length > 0 || $('.overlap-section-one-fourth').length > 0 || $('.overlap-section-three-fourth').length > 0)) { $('.overlap-section, .overlap-section-one-fourth, .overlap-section-three-fourth').each(function () { let _this = $(this), overlayBreakpoint = 767; if (_this.hasClass('md-overlap-disable')) { overlayBreakpoint = 991; } else if (_this.hasClass('sm-overlap-disable')) { overlayBreakpoint = 767; } if (getWindowWidth() > overlayBreakpoint) { setTimeout(function () { _this.imagesLoaded(function () { var closestSectionObj = _this.closest('section'); if (_this.closest('footer').length) { closestSectionObj = _this.closest('footer'); } var sectionPaddingTop = parseInt(closestSectionObj.css('padding-top')), areaHeight = _this.find('*').outerHeight(), overlayTop = areaHeight + sectionPaddingTop; if (_this.hasClass('overlap-section-one-fourth')) { overlayTop = (areaHeight / 4) - overlayTop; } else if (_this.hasClass('overlap-section-three-fourth')) { overlayTop = ((areaHeight * 3) / 4) - overlayTop; } else { overlayTop = (areaHeight / 2) - overlayTop; } _this.css('margin-top', overlayTop); var parentSectionObj = closestSectionObj.prev('.overlap-height'), overlapGap = parentSectionObj.find('.overlap-gap-section'); parentSectionObj.imagesLoaded(function () { if (overlapGap.length > 0) { var gapSectionHeight = overlapGap.outerHeight() + (Math.abs(overlayTop) - sectionPaddingTop); overlapGap.parents('.overlap-height').height(gapSectionHeight); } }); }); }, 500); } else { setTimeout(function () { $('.overlap-height').height('inherit'); $('.overlap-section, .overlap-section-one-fourth, .overlap-section-three-fourth').css('margin-top', 'inherit'); }, 500); } }); } } // Bottom overlap section position function setBottomOverLayerPosition(delay) { if (($('.overlap-section-bottom').length > 0) && getWindowWidth() >= 768) { $('.overlap-section-bottom').each(function () { var _this = $(this), timeOut = (_this.find('.instafeed-wrapper').length > 0) ? delay : 10; setTimeout(function () { _this.imagesLoaded(function () { var areaHeight = _this.outerHeight(), overlayerMargin = ((areaHeight / 2) - areaHeight); _this.parents('section').next('.overlap-gap-section-bottom').css('margin-top', overlayerMargin); _this.parents('section').next('.overlap-gap-section-bottom').css('padding-top', areaHeight); }); }, timeOut); }); } else { $('.overlap-gap-section-bottom').css('margin-top', ''); $('.overlap-gap-section-bottom').css('padding-top', ''); } } /* =================================== Magic cursor ====================================== */ if ($('.magic-cursor').length > 0) { $('
    ').clone(false).appendTo('body'); if ($('.magic-cursor').hasClass('light')) { $('.magic-cursor-wrapper').addClass('magic-cursor-light'); } if ($('.magic-cursor').hasClass('base-color')) { $('.magic-cursor-wrapper').addClass('magic-cursor-base-color'); } if ($('.magic-cursor').hasClass('view-cursor')) { $('.magic-cursor-wrapper').addClass('magic-view-cursor'); } if ($('.magic-cursor').hasClass('drag-cursor')) { $('.magic-cursor-wrapper').addClass('magic-drag-cursor'); } if ($('.magic-cursor').hasClass('round-cursor')) { $('.magic-cursor-wrapper').addClass('magic-round-cursor'); } var mouse = { x: 0, y: 0 }, pos = { x: 0, y: 0 }, ratio = .65, active = !1, ball = document.getElementById('ball-cursor'), ballloader = document.getElementById('ball-cursor-loader'); function mouseMove(e) { var a = window.pageYOffset || document.documentElement.scrollTop; mouse.x = e.pageX, mouse.y = e.pageY - a } function updatePosition() { active || (pos.x += (mouse.x - pos.x) * ratio, pos.y += (mouse.y - pos.y) * ratio, TweenLite.to(ball, .4, { x: pos.x, y: pos.y, })) } if (typeof TweenLite !== "undefined") { TweenLite.set(ball, { xPercent: -50, yPercent: -50, scale: 0, borderWidth: "0", opacity: 1 }); } document.addEventListener("mousemove", mouseMove); if (typeof gsap !== "undefined") { gsap.ticker.add(updatePosition); } if (typeof TweenMax !== 'undefined' && typeof TweenMax !== null) { $('.magic-cursor').mouseenter(function (e) { TweenMax.to('#ball-cursor', 0.3, { borderWidth: '2px', scale: 1, }); TweenMax.to('#ball-cursor-loader', 0.2, { borderWidth: '2px', top: 2, left: 2 }); $('.magic-cursor-wrapper').addClass('sliderhover'); if ($(this).hasClass('magic-cursor-vertical')) { $('.magic-cursor-wrapper').addClass('vertical'); } }); } if (typeof TweenMax !== 'undefined' && typeof TweenMax !== null) { $('.magic-cursor').mouseleave(function (e) { TweenMax.to('#ball-cursor', 0.3, { borderWidth: '2px', scale: 1, borderColor: 'transparent', opacity: 1 }); TweenMax.to('#ball-cursor-loader', 0.2, { borderWidth: '2px', top: 0, left: 0 }); $('.magic-cursor-wrapper').removeClass('sliderhover'); }); } } $(document).on('mouseenter', '.swiper-button-next, .swiper-button-prev, .swiper-pagination, a:not(.force-magic-cursor)', function () { $('.magic-cursor-wrapper').css({'opacity': 0}); }).on('mouseleave', '.swiper-button-next, .swiper-button-prev, .swiper-pagination, a:not(.force-magic-cursor)', function () { $('.magic-cursor-wrapper').css({'opacity': 1}); }); /* =================================== Box shadow animation ====================================== */ $(window).scroll(function (event) { $('[data-shadow-animation="true"]').each(function () { addBoxAnimationClass($(this)) }); }); $('[data-shadow-animation="true"]').removeClass('shadow-in'); $('[data-shadow-animation="true"]').each(function () { addBoxAnimationClass($(this)) }); function addBoxAnimationClass(boxObj) { if (boxObj.length) { var w = boxObj.width(); var h = boxObj.height(); var offset = boxObj.offset(); var right = offset.left + parseInt(boxObj.width()); var bottom = offset.top + parseInt(boxObj.height()); var visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - offset.left, right - window.pageXOffset)); var visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - offset.top, bottom - window.pageYOffset)); var visible = visibleX * visibleY / (w * h); if (visible >= 0.5) { if (typeof boxObj.attr('data-animation-delay') !== 'undefined' && boxObj.attr('data-animation-delay') > 10) { setTimeout(function () { boxObj.addClass('shadow-in'); }, boxObj.attr('data-animation-delay')); } else { boxObj.addClass('shadow-in'); } } } } /* =================================== Skrollr animation ====================================== */ var skroller; function initSkrollr() { if (typeof skrollr !== 'undefined' && typeof skrollr !== null) { skroller = skrollr.init({ 'forceHeight': false, 'smoothScrollingDuration': 1000, 'mobileCheck': function () { return false; } }); } } function reInitSkrollr() { destroySkrollr(); if ($(window).width() >= 1200) { setTimeout(function () { initSkrollr(); }, 1000); } } function destroySkrollr() { if (typeof skroller !== typeof undefined && skroller != 'undefined') { skroller.destroy(); } } if ($(window).width() >= 1200) { initSkrollr(); } /* =================================== Particles ====================================== */ var particleDefaultOptions = { particles: { number: { value: 80, density: { enable: !1, value_area: 800 } }, color: { value: ["#fdc14c", "#fd5c4c", "#48bb0f"] }, shape: { type: "circle" }, size: { value: 10, random: !0, anim: { enable: !0, speed: 1 } }, opacity: { value: 0.5, random: false }, move: { direction: "right", attract: { enable: !0 } }, line_linked: { enable: !1 } }, interactivity: { events: { onhover: { enable: !1 }, onclick: { enable: !1 } } }, "retina_detect": true }; var particleItems = $('[data-particle="true"]'); if (typeof particlesJS === 'function' && particleItems.length) { $.each(particleItems, function (index, particleItem) { var particleId = $(particleItem).attr('id'); var particleItemOptions = $(particleItem).attr('data-particle-options'); if (particleItemOptions != 'undefined' && typeof particleItemOptions !== typeof undefined) { particleItemOptions = JSON.parse(particleItemOptions); } else { particleItemOptions = particleDefaultOptions; } particlesJS(particleId, particleItemOptions); }); } /* =================================== SVG animated image mask ====================================== */ $('.animatedSvgPath').each(function () { var animePath = $(this); var paths = animePath.attr('pathdata:id').split(';'); paths.splice(paths.length, 0, animePath.attr('d')); anime({ targets: animePath[0], duration: 10000, easing: 'cubicBezier(0.5, 0, 0.5, 1)', d: paths, loop: true }); }); /* =================================== Custom cursor ====================================== */ var customCursorInit = false; handleCustomCursor(); // Custom cursor issue forceHideCustomCursor(); $(window).resize(function () { if (!customCursorInit && !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) { handleCustomCursor(); } forceHideCustomCursor(); }); function forceHideCustomCursor() { setTimeout(function () { if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { $('.cursor-page-inner').hide(); } else { $('.cursor-page-inner').show(); } }, 250); } function handleCustomCursor() { if ($('body').hasClass('custom-cursor')) { customCursorInit = true; const cursorInnerEl = document.querySelector('.circle-cursor-inner'); const cursorOuterEl = document.querySelector('.circle-cursor-outer'); let lastY, lastX; let magneticFlag = false; let anchorHover = false; // Document - mouse move window.onmousemove = function (event) { if (!magneticFlag) { cursorOuterEl.style.transform = 'translate(' + event.clientX + 'px, ' + event.clientY + 'px' + ')'; } if (cursorInnerEl.style.opacity = '0') { cursorInnerEl.style.opacity = '1'; } cursorInnerEl.style.transform = 'translate(' + event.clientX + 'px, ' + event.clientY + 'px' + ')'; lastY = event.clientY; lastX = event.clientX; } // Link - mouse enter $('body').on('mouseenter', 'a', function () { cursorInnerEl.classList.add('cursor-link-hover'); cursorOuterEl.classList.add('cursor-link-hover'); anchorHover = true; }); // Disable custom cursor when mouse enter in the magic cursor element $('body').on('mouseenter', '.magic-cursor', function () { cursorInnerEl.style.visibility = 'hidden'; cursorOuterEl.style.visibility = 'hidden'; }); // Enable custom cursor when mouse leave from the magic cursor element $('body').on('mouseleave', '.magic-cursor', function () { cursorInnerEl.style.visibility = 'visible'; cursorOuterEl.style.visibility = 'visible'; }); // Link - mouse leave $('body').on('mouseleave', 'a', function () { if ($(this).is('a') && $(this).closest('.cursor-as-pointer').length) { return; } cursorInnerEl.classList.remove('cursor-link-hover'); cursorOuterEl.classList.remove('cursor-link-hover'); anchorHover = false; }); // Cursor - mouse enter $('body').on('mouseenter', '.rounded-box', function () { const $elem = $(this); const scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (anchorHover) { cursorInnerEl.classList.remove('cursor-link-hover'); cursorOuterEl.classList.remove('cursor-link-hover'); } cursorOuterEl.style.transition = 'all .2s ease-out'; cursorOuterEl.style.transform = 'translate(' + $elem.offset().left + 'px, ' + ($elem.offset().top - scrollTop) + 'px' + ')'; cursorOuterEl.style.width = $elem.width() + 'px'; cursorOuterEl.style.height = $elem.height() + 'px'; cursorOuterEl.style.marginLeft = 0; cursorOuterEl.style.marginTop = 0; magneticFlag = true; }); // Cursor - mouse leave $('body').on('mouseleave', '.rounded-box', function () { if (anchorHover) { cursorInnerEl.classList.add('cursor-link-hover'); cursorOuterEl.classList.add('cursor-link-hover'); } cursorOuterEl.style.transition = null; cursorOuterEl.style.width = null; cursorOuterEl.style.height = null; cursorOuterEl.style.marginLeft = null; cursorOuterEl.style.marginTop = null; magneticFlag = false; }); cursorInnerEl.style.visibility = 'visible'; cursorOuterEl.style.visibility = 'visible'; } } /* =================================== Stack animataion ====================================== */ stackAnimation(); var stackLastScroll = 0; function stackAnimation() { windowScrollTop = window.pageYOffset || document.documentElement.scrollTop; $('.stack-box').each(function () { if ($(window).width() > 1199) { var _this = $(this); var stackItems = _this.find('.stack-item'); if (stackItems.length) { if (windowScrollTop > stackLastScroll) { _this.addClass('forward'); _this.removeClass('reverse'); } else { _this.removeClass('forward'); _this.addClass('reverse'); } for (let i = 0; i < stackItems.length - 1; i++) { var stackBoxHeight = (_this.height() / (_this.find('.stack-item').length)) * i; var stackTopPosition = _this.offset().top; if ((windowScrollTop - stackTopPosition) > stackBoxHeight) { var yMove = windowScrollTop - stackTopPosition - stackBoxHeight; if (yMove > _this.outerHeight()) { yMove = _this.outerHeight(); } $(stackItems[i]).css({'height': 'calc(100vh - ' + yMove + 'px)'}); $(stackItems[i]).addClass('active'); } else { $(stackItems[i]).css({'height': 'calc(100vh - 0px)'}); $(stackItems[i]).removeClass('active'); } } } } else { $('.stack-box .stack-item').css({'height': 'inherit'}); } }); stackLastScroll = windowScrollTop; } $(window).scroll(function () { stackAnimation(); }); /* =================================== Image tilt 3d effect using atropos ====================================== */ var atroposItems = document.querySelectorAll('[data-atropos]') function initAtropos() { if (atroposItems.length && $(window).width() > 1199) { atroposItems.forEach(function (atroposItem) { var myAtropos = Atropos({ el: atroposItem }); }); } } if (typeof Atropos !== 'undefined' && Atropos !== null) { initAtropos(); } function destroyAtropos() { if (atroposItems.length && $(window).width() > 1199) { atroposItems.forEach(function (atroposItem) { if (atroposItem.__atropos__) { atroposItem.__atropos__.destroy(); } }); } } /* =================================== Sticky vertical strip - add dark section class ====================================== */ var getElementsInArea = (function (docElm) { var viewportHeight = docElm.clientHeight; return function (e, opts) { var found = [], i; if (e && e.type == 'resize') { viewportHeight = docElm.clientHeight; } for (i = opts.elements.length; i--; ) { var elm = opts.elements[i], pos = elm.getBoundingClientRect(), topPerc = pos.top / viewportHeight * 100, bottomPerc = pos.bottom / viewportHeight * 100, middle = (topPerc + bottomPerc) / 2, inViewport = middle > opts.zone[1] && middle < (100 - opts.zone[1]); elm.classList.toggle(opts.markedClass, inViewport); if (inViewport) { found.push(elm); } } }; })(document.documentElement); $(window).on('scroll resize load', function (e) { getElementsInArea(e, { elements: document.querySelectorAll('.section-dark'), markedClass: 'section-dark-highlight', zone: [10, 10] }); if ($('.section-dark-highlight').length > 0) { $('.sticky-wrap').addClass('sticky-highlight'); } else { $('.sticky-wrap').removeClass('sticky-highlight'); } }); $(document).on('appear', 'footer', function (e) { $('.sticky-wrap').addClass('sticky-hidden'); }).on('disappear', 'footer', function (e) { $('.sticky-wrap').removeClass('sticky-hidden'); }); /* =================================== Quantity input ====================================== */ $('.qty-plus').click(function () { var th = $(this).closest('.quantity').find('.qty-text'); th.val(+th.val() + 1); }); $('.qty-minus').click(function () { var th = $(this).closest('.quantity').find('.qty-text'); if (th.val() > 1) th.val(+th.val() - 1); }); /* =================================== Infinite looping animation ====================================== */ const wrapperEl = document.querySelector('.looping-wrapper') || false; const numberOfEls = 100; const duration = 6000; const delay = duration / numberOfEls; let tl = anime.timeline({ duration: delay, complete: function () { tl.restart(); } }); function createEl(i) { let el = document.createElement('div'); const rotate = (360 / numberOfEls) * i; const translateY = -50; el.classList.add('el'); el.style.transform = 'rotate(' + rotate + 'deg) translateY(' + translateY + '%)'; tl.add({ begin: function () { anime({ targets: el, rotate: [rotate + 'deg', rotate + 10 + 'deg'], translateY: [translateY + '%', translateY + 10 + '%'], scale: [1, 1.25], easing: 'easeInOutSine', direction: 'alternate', duration: duration * .1 }); } }); if (wrapperEl) wrapperEl.appendChild(el); } for (let i = 0; i < numberOfEls; i++) createEl(i); /* =================================== Background color change on scroll - Adaptive Backgrounds ====================================== */ window.sections = [...document.querySelectorAll('[data-background]')]; window.lastScrollTop = window.pageYOffset; let activeSection; onScroll(); window.addEventListener('scroll', onScroll); function onScroll() { if (window.sections.length > 0) { const section = window.sections .map(section => { const el = section; const rect = el.getBoundingClientRect(); return {el, rect}; }) .find(section => section.rect.bottom >= (window.innerHeight * 0.5)); if (section && section.el !== activeSection) { activeSection = section.el; const sectionBg = activeSection.getAttribute('data-background'); activeSection.closest(".page-content").querySelectorAll("[data-background]").forEach(item => item.classList.remove("active")) activeSection.classList.add("active") if (typeof gsap !== "undefined") { gsap.to(activeSection.closest(".page-content"), {backgroundColor: sectionBg}) } } } } /* =================================== Cookies set ====================================== */ if (typeof $.cookie === 'function') { if ($('body').find('#cookies-model').length > 0) { setTimeout(function () { var cookieModel = $('#cookies-model'), cookieConsentclosed = $.cookie('cookieConsent'); if (cookieConsentclosed == 'closed') { cookieModel.remove(); } else { cookieModel.show(); } cookieModel.find('[data-accept-btn]').on('click', function (e) { e.preventDefault(); var expiresDays = 1; cookieModel.remove(); $.cookie('cookieConsent', 'closed', {expires: expiresDays, path: '/'}); }); }, 1000); } } /* =================================== Back to top scroll ====================================== */ $(document).on('click', '.scroll-top', function () { $('html, body').animate({scrollTop: 0}, 800); return false; }); function scrollIndicator() { var scrollTop = document.documentElement.scrollTop; if (scrollTop > 200) { $('.scroll-progress').addClass('visible'); } else { $('.scroll-progress').removeClass('visible'); } var scrollHeight = document.documentElement.scrollHeight; var windowHeight = document.documentElement.clientHeight; var maxScrollTop = scrollHeight - windowHeight; var scrollTop = document.documentElement.scrollTop; var scrollPercentage = (scrollTop / (maxScrollTop - 200)) * 100; $('.scroll-point').css('height', Math.min(scrollPercentage, 100) + '%'); /***** Theme demos button scroll to show *****/ var scrollPos = $(window).scrollTop(); if (scrollPos > 150) { $('.theme-demos').fadeIn(600); } } $(window).scroll(function () { scrollIndicator(); }); /* =================================== Trusted customers ====================================== */ $('.bg-more-trusted .btn').click(function (e) { e.preventDefault(); $(this).parent().parent().addClass('show-trusted-customers'); }); /* =================================== Theme demo panel ====================================== */ $(document).on('click', '.all-demo', function () { var themeDemosObj = $(this).parents('.theme-demos'); if (!themeDemosObj.hasClass('active')) { themeDemosObj.append(themeDemoData); themeDemosObj.addClass('active'); $('body').addClass('overflow-hidden'); } else { themeDemosObj.removeClass('active'); $('body').removeClass('overflow-hidden'); } }); var timer; $(document).on('click', '.close-popup', function () { var themeDemosObj = $(this).parents('.theme-demos'); themeDemosObj.removeClass('active'); $('body').removeClass('overflow-hidden'); clearTimeout(timer); timer = setTimeout(function () { $('.theme-demos-main').animate({scrollTop: '0'}, 'slow'); }, 800); }); $(document).on('keydown', function (event) { if (event.key == "Escape") { var themeDemosObj = $('.theme-demos'); themeDemosObj.removeClass('active'); $('body').removeClass('overflow-hidden'); clearTimeout(timer); timer = setTimeout(function () { $('.theme-demos-main').animate({scrollTop: '0'}, 'slow'); }, 800); } }); $(".all-demo a").click(function (event) { event.preventDefault(); }); })(jQuery); /* =================================== Google map ====================================== */ function initMap() { $('.map').each(function (e) { let _this = $(this), mapOptions = _this.attr('data-map-options'); // Convert String into the Json if (typeof (mapOptions) !== 'undefined' && mapOptions !== null) { mapOptions = $.parseJSON(mapOptions); } let lat = mapOptions.lat ? mapOptions.lat : 19.07, lng = mapOptions.lng ? mapOptions.lng : 72.87, marker = mapOptions.marker, popup = mapOptions.popup; switch (mapOptions.style && mapOptions.style.toLowerCase()) { case 'retro': map_style = Retro break; case 'standard': map_style = Standard break; case 'silver': map_style = Silver break; case 'dark': map_style = Dark break; case 'night': map_style = Night break; case 'aubergine': map_style = Aubergine break; default: map_style = Silver } // Google Map variable const gmap = new google.maps.Map(this, { zoom: 13, center: new google.maps.LatLng(lat, lng), mapTypeId: google.maps.MapTypeId.READMAP, styles: map_style }); // InforWindow variable const infowindow = new google.maps.InfoWindow({ content: popup && popup.html, maxWidth: 300, }); infowindow.setPosition(new google.maps.LatLng(lat, lng)); // Marker Options if (marker !== null && marker !== undefined) { // Custom HTML Marker if (marker.type.toLowerCase() === 'html') { function HTMLMarker(lat, lng) { this.lat = lat; this.lng = lng; this.pos = new google.maps.LatLng(lat, lng); } HTMLMarker.prototype = new google.maps.OverlayView(); //init html HTMLMarker.prototype.onAdd = function () { div = document.createElement('DIV'); div.className = `arrow_box ${marker.class ? ' ' + marker.class : ''}`; div.innerHTML = ``; div.style.setProperty('background-color', marker.color); let panes = this.getPanes(); panes.overlayImage.appendChild(div); let flag = false; if (popup.defaultOpen === true) { flag = true; infowindow.setOptions({pixelOffset: new google.maps.Size(10, -30)}); infowindow.open(gmap); } google.maps.event.addDomListener(div, "click", function (event) { if (popup) { infowindow.setOptions({pixelOffset: new google.maps.Size(10, -30)}); if (flag === false) { infowindow.open(gmap); flag = true; } else { infowindow.close(); flag = false; } } }); } HTMLMarker.prototype.draw = function () { let overlayProjection = this.getProjection(); let position = overlayProjection.fromLatLngToDivPixel(this.pos); let panes = this.getPanes(); panes.overlayImage.style.left = position.x + 'px'; panes.overlayImage.style.top = position.y - 30 + 'px'; } let htmlMarker = new HTMLMarker(lat, lng); htmlMarker.setMap(gmap); } else { // Custom Image Marker const image_marker = new google.maps.Marker({ icon: {url: marker.src}, position: {lat: lat, lng: lng}, map: gmap, animation: google.maps.Animation.DROP, }); let flag = false; if (popup.defaultOpen === true) { infowindow.open({ anchor: image_marker, map: gmap }); flag = true; } image_marker.addListener("click", toggleBounce); function toggleBounce() { if (image_marker.getAnimation() !== null) { image_marker.setAnimation(null); } else { image_marker.setAnimation(google.maps.Animation.BOUNCE); } if (popup) { if (flag === false) { infowindow.open({ anchor: image_marker, map: gmap }); flag = true; } else { infowindow.close(); flag = false; } } } } } else { // Default Marker const marker = new google.maps.Marker({ position: {lat: lat, lng: lng}, map: gmap }); let flag = false; if (popup.defaultOpen === true) { infowindow.open({ anchor: marker, map: gmap }); flag = true; } marker.addListener("click", function () { if (popup) { if (flag === false) { infowindow.open({ anchor: marker, map: gmap }); flag = true; } else { infowindow.close(); flag = false; } } }); } }); }