diff --git a/js/function.js b/js/function.js index 20f6c03..3af7ba8 100644 --- a/js/function.js +++ b/js/function.js @@ -51,274 +51,138 @@ }); } - /* 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: 0, - loop: true, - autoplay: { - delay: 4000, - }, - pagination: { - el: '.hero-pagination', - clickable: true, - }, - }); + /* + Sayfa performansını artırmak ve 'Layout Thrashing' hatalarını önlemek için + ağır kütüphaneleri kademeli (staggered) olarak başlatıyoruz. + */ + + // 1. Grup: Swiper Slider'lar (100ms) + setTimeout(function() { + if ($('.hero-swiper').length) { + new Swiper('.hero-swiper', { + speed: 1000, loop: true, autoplay: { delay: 5000 }, + navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, + pagination: { el: '.swiper-pagination', clickable: true } + }); + } + if ($('.hero-slider-layout .swiper').length) { + new Swiper('.hero-slider-layout .swiper', { + slidesPerView: 1, speed: 1000, loop: true, autoplay: { delay: 4000 }, + pagination: { el: '.hero-pagination', clickable: true } + }); + } + if ($('.hero-client-slider').length) { + new Swiper('.hero-client-slider .swiper', { + slidesPerView: 2, speed: 1000, spaceBetween: 30, loop: true, + autoplay: { delay: 5000 }, + breakpoints: { 768: { slidesPerView: 4 }, 991: { slidesPerView: 5 } } + }); + } + if ($('.services-slider').length) { + 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 } } + }); + } + if ($('.testimonial-slider').length) { + 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 } } + }); + } + if ($('.service-single-slider').length) { + new Swiper('.service-single-slider .swiper', { + slidesPerView: 1, speed: 1000, spaceBetween: 30, loop: true, + autoplay: { delay: 5000 }, + pagination: { el: '.service-pagination', clickable: true } + }); + } + }, 100); - /* 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, - } - } - }); - } + // 2. Grup: WOW.js & Animasyonlar (300ms) + setTimeout(function() { + if (typeof WOW !== 'undefined') { + new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true }).init(); + } + }, 300); - /* 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, - } - } - }); - } + // 3. Grup: GSAP, ScrollTrigger & Text Effects (500ms) + setTimeout(function() { + if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') { + gsap.registerPlugin(ScrollTrigger); - /* 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, - } - } - }); - } + // Image Reveal + 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 }); + }); - /* 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, - } - } - }); - } + // Text Styles + if (typeof SplitText !== 'undefined') { + document.querySelectorAll('.text-anime-style-1').forEach((el) => { + let split = new SplitText(el, { type: "chars, words" }); + gsap.from(split.words, { duration: 1, delay: 0.5, x: 20, autoAlpha: 0, stagger: 0.05, scrollTrigger: { trigger: el, start: "top 85%" } }); + }); + document.querySelectorAll('.text-anime-style-2').forEach((el) => { + let split = new SplitText(el, { type: "chars, words" }); + gsap.from(split.chars, { duration: 1, delay: 0.1, x: 20, autoAlpha: 0, stagger: 0.03, ease: "power2.out", scrollTrigger: { trigger: el, start: "top 85%" } }); + }); + document.querySelectorAll('.text-anime-style-3').forEach((el) => { + el.split = new SplitText(el, { type: "lines,words,chars", linesClass: "split-line" }); + gsap.set(el, { perspective: 400 }); + gsap.set(el.split.chars, { opacity: 0, x: "50" }); + gsap.to(el.split.chars, { scrollTrigger: { trigger: el, start: "top 90%" }, x: "0", y: "0", rotateX: "0", opacity: 1, duration: 1, ease: Back.easeOut, stagger: 0.02 }); + }); + } + } + }, 500); - /* 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 */ - $('.gallery-items').magnificPopup({ - delegate: 'a', - type: 'image', - closeOnContentClick: false, - closeBtnInside: false, - mainClass: 'mfp-with-zoom', - image: { - verticalFit: true, - }, - gallery: { - enabled: true - }, - zoom: { - enabled: true, - duration: 300, // don't foget to change the duration also in CSS - opener: function(element) { - return element.find('img'); - } - } - }); + // 4. Grup: Parallax, Video, Counter & Magnific Popup (750ms) + setTimeout(function() { + if ($('.parallaxie').length && $(window).width() > 991) { + $('.parallaxie').parallaxie({ speed: 0.55, offset: 0 }); + } + if ($('#herovideo').length) { + $("#herovideo").YTPlayer(); + } + if ($('.counter').length) { + $('.counter').counterUp({ delay: 6, time: 2000 }); + } + if ($('.popup-video').length) { + $('.popup-video').magnificPopup({ + type: 'iframe', + mainClass: 'mfp-fade', + removalDelay: 160, + preloader: false, + fixedContentPos: true + }); + } + if ($('.gallery-items').length) { + $('.gallery-items').magnificPopup({ + delegate: 'a', + type: 'image', + closeOnContentClick: false, + closeBtnInside: false, + mainClass: 'mfp-with-zoom', + image: { verticalFit: true }, + gallery: { enabled: true }, + zoom: { + enabled: true, + duration: 300, + opener: function(element) { return element.find('img'); } + } + }); + } + }, 750); /* Contact form validation */ var $contactform = $("#contactForm"); @@ -332,7 +196,6 @@ } function submitForm(){ - /* Ajax call to submit form */ $.ajax({ type: "POST", url: "form-process.php", @@ -353,11 +216,7 @@ } function submitMSG(valid, msg){ - if(valid){ - var msgClasses = "h4 text-success"; - } else { - var msgClasses = "h4 text-danger"; - } + var msgClasses = valid ? "h4 text-success" : "h4 text-danger"; $("#msgSubmit").removeClass().addClass(msgClasses).text(msg); } @@ -373,7 +232,6 @@ } function submitappointmentForm(){ - /* Ajax call to submit form */ $.ajax({ type: "POST", url: "form-appointment.php", @@ -394,23 +252,8 @@ } function appointmentsubmitMSG(valid, msg){ - if(valid){ - var msgClasses = "h3 text-success"; - } else { - var msgClasses = "h3 text-danger"; - } + var msgClasses = valid ? "h3 text-success" : "h3 text-danger"; $("#msgSubmit").removeClass().addClass(msgClasses).text(msg); } - - /* Popup Video */ - if ($('.popup-video').length) { - $('.popup-video').magnificPopup({ - type: 'iframe', - mainClass: 'mfp-fade', - removalDelay: 160, - preloader: false, - fixedContentPos: true - }); - } })(jQuery); \ No newline at end of file