diff --git a/js/function.js b/js/function.js index f2a13bd..20f6c03 100644 --- a/js/function.js +++ b/js/function.js @@ -51,244 +51,251 @@ }); } - /* Hero Slider Layout JS */ - const hero_slider_layout = new Swiper('.hero-slider-layout .swiper', { - slidesPerView : 1, - speed: 1000, - spaceBetween: 0, - loop: true, - autoplay: { - delay: 4000, - }, - pagination: { - el: '.hero-pagination', - clickable: true, - }, - }); - - /* testimonial Slider JS */ - if ($('.hero-client-slider').length) { - const testimonial_slider = new Swiper('.hero-client-slider .swiper', { - slidesPerView : 2, - speed: 1000, - spaceBetween: 30, - loop: true, - autoplay: { - delay: 5000, - }, - breakpoints: { - 768:{ - slidesPerView: 4, - }, - 991:{ - slidesPerView: 5, - } - } - }); - } - - /* Services Slider JS */ - if ($('.services-slider').length) { - const services_slider = new Swiper('.services-slider .swiper', { + /* Delay heavy initializations to improve TBT and Main Thread work */ + setTimeout(function() { + /* Hero Slider Layout JS */ + const hero_slider_layout = new Swiper('.hero-slider-layout .swiper', { slidesPerView : 1, speed: 1000, - spaceBetween: 30, + spaceBetween: 0, loop: true, autoplay: { - delay: 5000, + delay: 4000, }, pagination: { - el: '.services-pagination', + el: '.hero-pagination', clickable: true, }, - breakpoints: { - 768:{ - slidesPerView: 2, - }, - 991:{ - slidesPerView: 3, - } - } }); - } - /* testimonial Slider JS */ - if ($('.testimonial-slider').length) { - const testimonial_slider = new Swiper('.testimonial-slider .swiper', { - slidesPerView : 1, - speed: 1000, - spaceBetween: 30, - loop: true, - autoplay: { - delay: 5000, - }, - pagination: { - el: '.testimonial-pagination', - clickable: true, - }, - navigation: { - nextEl: '.testimonial-button-next', - prevEl: '.testimonial-button-prev', - }, - breakpoints: { - 768:{ - slidesPerView: 2, + /* testimonial Slider JS */ + if ($('.hero-client-slider').length) { + const testimonial_slider = new Swiper('.hero-client-slider .swiper', { + slidesPerView : 2, + speed: 1000, + spaceBetween: 30, + loop: true, + autoplay: { + delay: 5000, }, - 991:{ - slidesPerView: 3, + breakpoints: { + 768:{ + slidesPerView: 4, + }, + 991:{ + slidesPerView: 5, + } } - } - }); - } - - /* Service Single Slider JS */ - if ($('.service-single-slider').length) { - const testimonial_slider = new Swiper('.service-single-slider .swiper', { - slidesPerView : 1, - speed: 1000, - spaceBetween: 30, - loop: true, - autoplay: { - delay: 5000, - }, - pagination: { - el: '.service-pagination', - clickable: true, - }, - breakpoints: { - 768:{ - slidesPerView: 1, - }, - 991:{ - slidesPerView: 1, - } - } - }); - } - - /* Youtube Background Video JS */ - if ($('#herovideo').length) { - var myPlayer = $("#herovideo").YTPlayer(); - } - - /* Init Counter */ - if ($('.counter').length) { - $('.counter').counterUp({ delay: 6, time: 3000 }); - } - - /* Image Reveal Animation */ - if ($('.reveal').length) { - gsap.registerPlugin(ScrollTrigger); - let revealContainers = document.querySelectorAll(".reveal"); - revealContainers.forEach((container) => { - let image = container.querySelector("img"); - let tl = gsap.timeline({ - scrollTrigger: { - trigger: container, - toggleActions: "play none none none" - } - }); - tl.set(container, { - autoAlpha: 1 - }); - tl.from(container, 1, { - xPercent: -100, - ease: Power2.out - }); - tl.from(image, 1, { - xPercent: 100, - scale: 1, - delay: -1, - ease: Power2.out - }); - }); - } - - /* Text Effect Animation */ - if ($('.text-anime-style-1').length) { - let staggerAmount = 0.05, - translateXValue = 0, - delayValue = 0.5, - animatedTextElements = document.querySelectorAll('.text-anime-style-1'); - - animatedTextElements.forEach((element) => { - let animationSplitText = new SplitText(element, { type: "chars, words" }); - gsap.from(animationSplitText.words, { - duration: 1, - delay: delayValue, - x: 20, - autoAlpha: 0, - stagger: staggerAmount, - scrollTrigger: { trigger: element, start: "top 85%" }, - }); - }); - } - - if ($('.text-anime-style-2').length) { - let staggerAmount = 0.03, - translateXValue = 20, - delayValue = 0.1, - easeType = "power2.out", - animatedTextElements = document.querySelectorAll('.text-anime-style-2'); - - animatedTextElements.forEach((element) => { - let animationSplitText = new SplitText(element, { type: "chars, words" }); - gsap.from(animationSplitText.chars, { - duration: 1, - delay: delayValue, - x: translateXValue, - autoAlpha: 0, - stagger: staggerAmount, - ease: easeType, - scrollTrigger: { trigger: element, start: "top 85%"}, - }); - }); - } - - if ($('.text-anime-style-3').length) { - let animatedTextElements = document.querySelectorAll('.text-anime-style-3'); - - animatedTextElements.forEach((element) => { - //Reset if needed - if (element.animation) { - element.animation.progress(1).kill(); - element.split.revert(); - } - - element.split = new SplitText(element, { - type: "lines,words,chars", - linesClass: "split-line", - }); - gsap.set(element, { perspective: 400 }); - - gsap.set(element.split.chars, { - opacity: 0, - x: "50", - }); - - element.animation = gsap.to(element.split.chars, { - scrollTrigger: { trigger: element, start: "top 90%" }, - x: "0", - y: "0", - rotateX: "0", - opacity: 1, - duration: 1, - ease: Back.easeOut, - stagger: 0.02, - }); - }); - } - - /* Parallaxie js */ - var $parallaxie = $('.parallaxie'); - if($parallaxie.length && ($window.width() > 991)) - { - if ($window.width() > 768) { - $parallaxie.parallaxie({ - speed: 0.55, - offset: 0, }); } + + /* Services Slider JS */ + if ($('.services-slider').length) { + const services_slider = new Swiper('.services-slider .swiper', { + slidesPerView : 1, + speed: 1000, + spaceBetween: 30, + loop: true, + autoplay: { + delay: 5000, + }, + pagination: { + el: '.services-pagination', + clickable: true, + }, + breakpoints: { + 768:{ + slidesPerView: 2, + }, + 991:{ + slidesPerView: 3, + } + } + }); + } + + /* testimonial Slider JS */ + if ($('.testimonial-slider').length) { + const testimonial_slider = new Swiper('.testimonial-slider .swiper', { + slidesPerView : 1, + speed: 1000, + spaceBetween: 30, + loop: true, + autoplay: { + delay: 5000, + }, + pagination: { + el: '.testimonial-pagination', + clickable: true, + }, + navigation: { + nextEl: '.testimonial-button-next', + prevEl: '.testimonial-button-prev', + }, + breakpoints: { + 768:{ + slidesPerView: 2, + }, + 991:{ + slidesPerView: 3, + } + } + }); + } + + /* Service Single Slider JS */ + if ($('.service-single-slider').length) { + const testimonial_slider = new Swiper('.service-single-slider .swiper', { + slidesPerView : 1, + speed: 1000, + spaceBetween: 30, + loop: true, + autoplay: { + delay: 5000, + }, + pagination: { + el: '.service-pagination', + clickable: true, + }, + breakpoints: { + 768:{ + slidesPerView: 1, + }, + 991:{ + slidesPerView: 1, + } + } + }); + } + + /* Image Reveal Animation */ + if ($('.reveal').length) { + gsap.registerPlugin(ScrollTrigger); + let revealContainers = document.querySelectorAll(".reveal"); + revealContainers.forEach((container) => { + let image = container.querySelector("img"); + let tl = gsap.timeline({ + scrollTrigger: { + trigger: container, + toggleActions: "play none none none" + } + }); + tl.set(container, { + autoAlpha: 1 + }); + tl.from(container, 1, { + xPercent: -100, + ease: Power2.out + }); + tl.from(image, 1, { + xPercent: 100, + scale: 1, + delay: -1, + ease: Power2.out + }); + }); + } + + /* Text Effect Animation */ + if ($('.text-anime-style-1').length) { + let staggerAmount = 0.05, + translateXValue = 0, + delayValue = 0.5, + animatedTextElements = document.querySelectorAll('.text-anime-style-1'); + + animatedTextElements.forEach((element) => { + let animationSplitText = new SplitText(element, { type: "chars, words" }); + gsap.from(animationSplitText.words, { + duration: 1, + delay: delayValue, + x: 20, + autoAlpha: 0, + stagger: staggerAmount, + scrollTrigger: { trigger: element, start: "top 85%" }, + }); + }); + } + + if ($('.text-anime-style-2').length) { + let staggerAmount = 0.03, + translateXValue = 20, + delayValue = 0.1, + easeType = "power2.out", + animatedTextElements = document.querySelectorAll('.text-anime-style-2'); + + animatedTextElements.forEach((element) => { + let animationSplitText = new SplitText(element, { type: "chars, words" }); + gsap.from(animationSplitText.chars, { + duration: 1, + delay: delayValue, + x: translateXValue, + autoAlpha: 0, + stagger: staggerAmount, + ease: easeType, + scrollTrigger: { trigger: element, start: "top 85%"}, + }); + }); + } + + if ($('.text-anime-style-3').length) { + let animatedTextElements = document.querySelectorAll('.text-anime-style-3'); + + animatedTextElements.forEach((element) => { + //Reset if needed + if (element.animation) { + element.animation.progress(1).kill(); + element.split.revert(); + } + + element.split = new SplitText(element, { + type: "lines,words,chars", + linesClass: "split-line", + }); + gsap.set(element, { perspective: 400 }); + + gsap.set(element.split.chars, { + opacity: 0, + x: "50", + }); + + element.animation = gsap.to(element.split.chars, { + scrollTrigger: { trigger: element, start: "top 90%" }, + x: "0", + y: "0", + rotateX: "0", + opacity: 1, + duration: 1, + ease: Back.easeOut, + stagger: 0.02, + }); + }); + } + + /* Parallaxie js */ + var $parallaxie = $('.parallaxie'); + if($parallaxie.length && ($(window).width() > 991)) + { + if ($(window).width() > 768) { + $parallaxie.parallaxie({ + speed: 0.55, + offset: 0, + }); + } + } + + /* Animated Wow Js */ + new WOW().init(); + + /* Youtube Background Video JS */ + if ($('#herovideo').length) { + var myPlayer = $("#herovideo").YTPlayer(); + } + + }, 100); + + /* Init Counter (Keep this faster or outside if needed) */ + if ($('.counter').length) { + $('.counter').counterUp({ delay: 6, time: 3000 }); } /* Zoom Gallery screenshot */ @@ -315,12 +322,14 @@ /* Contact form validation */ var $contactform = $("#contactForm"); - $contactform.validator({focus: false}).on("submit", function (event) { - if (!event.isDefaultPrevented()) { - event.preventDefault(); - submitForm(); - } - }); + if($contactform.length) { + $contactform.validator({focus: false}).on("submit", function (event) { + if (!event.isDefaultPrevented()) { + event.preventDefault(); + submitForm(); + } + }); + } function submitForm(){ /* Ajax call to submit form */ @@ -351,16 +360,17 @@ } $("#msgSubmit").removeClass().addClass(msgClasses).text(msg); } - /* Contact form validation end */ /* Appointment form validation */ var $appointmentForm = $("#appointmentForm"); - $appointmentForm.validator({focus: false}).on("submit", function (event) { - if (!event.isDefaultPrevented()) { - event.preventDefault(); - submitappointmentForm(); - } - }); + if($appointmentForm.length) { + $appointmentForm.validator({focus: false}).on("submit", function (event) { + if (!event.isDefaultPrevented()) { + event.preventDefault(); + submitappointmentForm(); + } + }); + } function submitappointmentForm(){ /* Ajax call to submit form */ @@ -391,10 +401,6 @@ } $("#msgSubmit").removeClass().addClass(msgClasses).text(msg); } - /* Appointment form validation end */ - - /* Animated Wow Js */ - new WOW().init(); /* Popup Video */ if ($('.popup-video').length) {