(function ($) { "use strict"; /*============================================= = Preloader = =============================================*/ function preloader() { $('#preloader').delay(0).fadeOut(); }; $(window).on('load', function () { preloader(); mainSlider(); wowAnimation(); aosAnimation(); tg_title_animation(); }); /*============================================= = Mobile Menu = =============================================*/ //SubMenu Dropdown Toggle if ($('.menu-area li.menu-item-has-children ul').length) { $('.menu-area .navigation li.menu-item-has-children').append(''); } //Mobile Nav Hide Show if ($('.mobile-menu').length) { var mobileMenuContent = $('.menu-area .main-menu').html(); $('.mobile-menu .menu-box .menu-outer').append(mobileMenuContent); //Dropdown Button $('.mobile-menu li.menu-item-has-children .dropdown-btn').on('click', function () { $(this).toggleClass('open'); $(this).prev('ul').slideToggle(300); }); //Menu Toggle Btn $('.mobile-nav-toggler').on('click', function () { $('body').addClass('mobile-menu-visible'); }); //Menu Toggle Btn $('.menu-backdrop, .mobile-menu .close-btn').on('click', function () { $('body').removeClass('mobile-menu-visible'); }); } /*============================================= = Menu sticky & Scroll to top = =============================================*/ $(window).on('scroll', function () { var scroll = $(window).scrollTop(); if (scroll < 245) { $("#sticky-header").removeClass("sticky-menu"); $('.scroll-to-target').removeClass('open'); $("#header-fixed-height").removeClass("active-height"); } else { $("#sticky-header").addClass("sticky-menu"); $('.scroll-to-target').addClass('open'); $("#header-fixed-height").addClass("active-height"); } }); /*============================================= = Scroll Up = =============================================*/ if ($('.scroll-to-target').length) { $(".scroll-to-target").on('click', function () { var target = $(this).attr('data-target'); // animate $('html, body').animate({ scrollTop: $(target).offset().top }, 1000); }); } /*============================================= = Header Search = =============================================*/ $(".header-search > a").on('click', function () { $(".search-popup-wrap").slideToggle(); return false; }); $(".search-close").on('click', function () { $(".search-popup-wrap").slideUp(500); }); /*============================================= = Data Background = =============================================*/ $("[data-background]").each(function () { $(this).css("background-image", "url(" + $(this).attr("data-background") + ")") }) /*============================================= = Main Slider = =============================================*/ function mainSlider() { var BasicSlider = $('.slider-active'); BasicSlider.on('init', function (e, slick) { var $firstAnimatingElements = $('.single-slider:first-child').find('[data-animation]'); doAnimations($firstAnimatingElements); }); BasicSlider.on('beforeChange', function (e, slick, currentSlide, nextSlide) { var $animatingElements = $('.single-slider[data-slick-index="' + nextSlide + '"]').find('[data-animation]'); doAnimations($animatingElements); }); BasicSlider.slick({ autoplay: false, autoplaySpeed: 10000, dots: true, fade: true, arrows: false, responsive: [ { breakpoint: 767, settings: { dots: false, arrows: false } } ] }); function doAnimations(elements) { var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; elements.each(function () { var $this = $(this); var $animationDelay = $this.data('delay'); var $animationType = 'animated ' + $this.data('animation'); $this.css({ 'animation-delay': $animationDelay, '-webkit-animation-delay': $animationDelay }); $this.addClass($animationType).one(animationEndEvents, function () { $this.removeClass($animationType); }); }); } } /*============================================= = Brand Active = =============================================*/ $('.brand-active').slick({ dots: false, infinite: true, speed: 1000, autoplay: true, arrows: false, slidesToShow: 6, slidesToScroll: 2, responsive: [ { breakpoint: 1200, settings: { slidesToShow: 5, slidesToScroll: 1, infinite: true, } }, { breakpoint: 992, settings: { slidesToShow: 4, slidesToScroll: 1 } }, { breakpoint: 767, settings: { slidesToShow: 3, slidesToScroll: 1, arrows: false, } }, { breakpoint: 575, settings: { slidesToShow: 2, slidesToScroll: 1, arrows: false, } }, ] }); /*============================================= = Services Active = =============================================*/ $('.services-active').slick({ dots: true, infinite: true, speed: 1000, autoplay: true, arrows: false, slidesToShow: 4, slidesToScroll: 1, responsive: [ { breakpoint: 1400, settings: { slidesToShow: 3, slidesToScroll: 1, infinite: true, } }, { breakpoint: 1200, settings: { slidesToShow: 2, slidesToScroll: 1, infinite: true, } }, { breakpoint: 992, settings: { slidesToShow: 2, slidesToScroll: 1 } }, { breakpoint: 767, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false, } }, { breakpoint: 575, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false, } }, ] }); /*============================================= = Services Active = =============================================*/ $('.services-active-two').slick({ dots: false, infinite: true, speed: 1000, autoplay: true, arrows: false, slidesToShow: 5, slidesToScroll: 1, responsive: [ { breakpoint: 1400, settings: { slidesToShow: 4, slidesToScroll: 1, infinite: true, } }, { breakpoint: 1200, settings: { slidesToShow: 3, slidesToScroll: 1, infinite: true, } }, { breakpoint: 992, settings: { slidesToShow: 2, slidesToScroll: 1 } }, { breakpoint: 767, settings: { slidesToShow: 2, slidesToScroll: 1, arrows: false, } }, { breakpoint: 575, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false, } }, ] }); /*============================================= = Testimonial Active = =============================================*/ $('.testimonial-active').slick({ dots: false, infinite: true, speed: 1000, autoplay: true, arrows: true, prevArrow: '', nextArrow: '', appendArrows: ".testimonial-nav", slidesToShow: 2, slidesToScroll: 1, responsive: [ { breakpoint: 1200, settings: { slidesToShow: 2, slidesToScroll: 1, infinite: true, } }, { breakpoint: 992, settings: { slidesToShow: 2, slidesToScroll: 1 } }, { breakpoint: 767, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false, } }, { breakpoint: 575, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false, } }, ] }); /*============================================= = Testimonial Active = =============================================*/ $('.testimonial-active-two').slick({ dots: true, infinite: true, speed: 1000, autoplay: true, arrows: false, slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 1200, settings: { slidesToShow: 3, slidesToScroll: 1, infinite: true, } }, { breakpoint: 992, settings: { slidesToShow: 2, slidesToScroll: 1 } }, { breakpoint: 767, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false, } }, { breakpoint: 575, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false, } }, ] }); /*============================================= = History Active = =============================================*/ $('.history-active').slick({ dots: false, infinite: true, speed: 1000, autoplay: true, arrows: true, prevArrow: '', nextArrow: '', appendArrows: ".history-nav", slidesToShow: 4, slidesToScroll: 1, responsive: [ { breakpoint: 1200, settings: { slidesToShow: 3, slidesToScroll: 1, infinite: true, } }, { breakpoint: 992, settings: { slidesToShow: 2, slidesToScroll: 1 } }, { breakpoint: 767, settings: { slidesToShow: 2, slidesToScroll: 1, arrows: false, } }, { breakpoint: 575, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false, } }, ] }); /*============================================= = Team Active = =============================================*/ $('.team-active').slick({ dots: false, infinite: true, speed: 1000, autoplay: true, arrows: true, prevArrow: '', nextArrow: '', appendArrows: ".team-nav", slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 1200, settings: { slidesToShow: 3, slidesToScroll: 1, infinite: true, } }, { breakpoint: 992, settings: { slidesToShow: 2, slidesToScroll: 1 } }, { breakpoint: 767, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false, } }, { breakpoint: 575, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false, } }, ] }); /*============================================= = Project Active = =============================================*/ if (jQuery(".project-active").length > 0) { let courses = new Swiper(".project-active", { slidesPerView: 1, spaceBetween: 30, loop: true, autoplay: false, breakpoints: { 500: { slidesPerView: 2, spaceBetween: 20, }, 768: { slidesPerView: 2.5, spaceBetween: 20, }, 992: { slidesPerView: 3.3, spaceBetween: 20, }, 1200: { slidesPerView: 3.5, spaceBetween: 20, }, 1500: { slidesPerView: 3.5, spaceBetween: 30, }, }, // If we need pagination pagination: { el: ".project-swiper-pagination", clickable: true, }, // Navigation arrows navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, // And if we need scrollbar scrollbar: { el: ".swiper-scrollbar", }, }); } /*============================================= = beforeAfter Active = =============================================*/ $.fn.BeerSlider = function (options) { options = options || {}; return this.each(function () { new BeerSlider(this, options); }); }; $(".beer-slider").each(function (index, el) { $(el).BeerSlider({ start: $(el).data("start") }) }); /*============================================= = Cart Active = =============================================*/ $('.qtybutton-box span').on("click", function () { var $input = $(this).parents('.num-block').find('input.in-num'); if ($(this).hasClass('minus')) { var count = parseFloat($input.val()) - 1; count = count < 1 ? 1 : count; if (count < 2) { $(this).addClass('dis'); } else { $(this).removeClass('dis'); } $input.val(count); } else { var count = parseFloat($input.val()) + 1 $input.val(count); if (count > 1) { $(this).parents('.num-block').find(('.minus')).removeClass('dis'); } } $input.change(); return false; }); /*------------------------------------- Intersection Observer -------------------------------------*/ if (!!window.IntersectionObserver) { let observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add("active-animation"); //entry.target.src = entry.target.dataset.src; observer.unobserve(entry.target); } }); }, { rootMargin: "0px 0px -100px 0px" }); document.querySelectorAll('.has-animation').forEach(block => { observer.observe(block) }); } else { document.querySelectorAll('.has-animation').forEach(block => { block.classList.remove('has-animation') }); } /*============================================= = Jarallax Active = =============================================*/ $('.jarallax').jarallax({ speed: 0.2, }); /*============================================= = Odometer Active = =============================================*/ $('.odometer').appear(function (e) { var odo = $(".odometer"); odo.each(function () { var countNumber = $(this).attr("data-count"); $(this).html(countNumber); }); }); /*============================================= = Magnific Popup = =============================================*/ $('.popup-image').magnificPopup({ type: 'image', gallery: { enabled: true } }); /* magnificPopup video view */ $('.popup-video').magnificPopup({ type: 'iframe' }); /*============================================= = Wow Active = =============================================*/ function wowAnimation() { var wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: false, live: true }); wow.init(); } /*============================================= = Aos Active = =============================================*/ function aosAnimation() { AOS.init({ duration: 1000, mirror: true, once: true, disable: 'mobile', }); } })(jQuery);