From af263e5e23ef026af31ccf1c50ad769515e4af49 Mon Sep 17 00:00:00 2001 From: mstfyldz Date: Tue, 5 May 2026 00:27:35 +0300 Subject: [PATCH] perf: spread initializations further and optimize scroll events for lower main thread work --- js/function.js | 153 +++++++++++++++++++++++++------------------------ 1 file changed, 78 insertions(+), 75 deletions(-) diff --git a/js/function.js b/js/function.js index 3af7ba8..e9a2a7b 100644 --- a/js/function.js +++ b/js/function.js @@ -9,7 +9,7 @@ $(".preloader").fadeOut(600); }); - /* Sticky Header */ + /* Sticky Header Optimizasyonu */ if($('.active-sticky-header').length){ var $headerSticky = $('header .header-sticky'); var $headerMain = $("header.main-header"); @@ -25,12 +25,20 @@ }); var ticking = false; - $window.on("scroll", function() { + $window.on("scroll", { passive: true }, function() { if (!ticking) { window.requestAnimationFrame(function() { var fromTop = $window.scrollTop(); - $headerSticky.toggleClass("hide", (fromTop > cachedHeight + 100)); - $headerSticky.toggleClass("active", (fromTop > 600)); + if (fromTop > cachedHeight + 100) { + $headerSticky.addClass("hide"); + } else { + $headerSticky.removeClass("hide"); + } + if (fromTop > 600) { + $headerSticky.addClass("active"); + } else { + $headerSticky.removeClass("active"); + } ticking = false; }); ticking = true; @@ -38,11 +46,13 @@ }); } - /* Slick Menu JS */ - $('#menu').slicknav({ - label : '', - prependTo : '.responsive-menu' - }); + /* Slick Menu JS (Staggered) */ + setTimeout(function() { + $('#menu').slicknav({ + label : '', + prependTo : '.responsive-menu' + }); + }, 50); if($("a[href='#top']").length){ $(document).on("click", "a[href='#top']", function() { @@ -52,11 +62,11 @@ } /* - Sayfa performansını artırmak ve 'Layout Thrashing' hatalarını önlemek için - ağır kütüphaneleri kademeli (staggered) olarak başlatıyoruz. + AGRESİF SIRALI BAŞLATMA (Aggressive Sequential Initialization) + Layout Thrashing'i önlemek için her bileşene kendi zaman dilimini veriyoruz. */ - // 1. Grup: Swiper Slider'lar (100ms) + // 1. Hero Swiper (100ms) setTimeout(function() { if ($('.hero-swiper').length) { new Swiper('.hero-swiper', { @@ -65,19 +75,10 @@ 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 } } - }); - } + }, 100); + + // 2. Services Swiper (250ms) + setTimeout(function() { if ($('.services-slider').length) { new Swiper('.services-slider .swiper', { slidesPerView: 1, speed: 1000, spaceBetween: 30, loop: true, @@ -86,6 +87,10 @@ breakpoints: { 768: { slidesPerView: 2 }, 991: { slidesPerView: 3 } } }); } + }, 250); + + // 3. Testimonial & Client Swipers (400ms) + setTimeout(function() { if ($('.testimonial-slider').length) { new Swiper('.testimonial-slider .swiper', { slidesPerView: 1, speed: 1000, spaceBetween: 30, loop: true, @@ -95,6 +100,23 @@ breakpoints: { 768: { slidesPerView: 2 }, 991: { slidesPerView: 3 } } }); } + 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 } } + }); + } + }, 400); + + // 4. Diğer Sliderlar (550ms) + setTimeout(function() { + 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 ($('.service-single-slider').length) { new Swiper('.service-single-slider .swiper', { slidesPerView: 1, speed: 1000, spaceBetween: 30, loop: true, @@ -102,51 +124,47 @@ pagination: { el: '.service-pagination', clickable: true } }); } - }, 100); + }, 550); - // 2. Grup: WOW.js & Animasyonlar (300ms) + // 5. WOW.js Animasyonları (700ms) setTimeout(function() { - if (typeof WOW !== 'undefined') { - new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true }).init(); + if ($('.wow').length) { + new WOW().init(); } - }, 300); + }, 700); - // 3. Grup: GSAP, ScrollTrigger & Text Effects (500ms) + // 6. GSAP & Metin Efektleri (850ms) setTimeout(function() { - if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') { + if ($('.reveal').length) { gsap.registerPlugin(ScrollTrigger); - - // 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" } }); + let tl = gsap.timeline({ + scrollTrigger: { trigger: container, toggleActions: "restart none none reset" } + }); 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 }); + tl.from(container, 1.5, { xPercent: -100, ease: Power2.out }); + tl.from(image, 1.5, { xPercent: 100, scale: 1.3, delay: -1.5, ease: Power2.out }); }); - - // 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 }); + } + if ($('.split-text-anim').length) { + let st = $(".split-text-anim"); + if (st.length) { + gsap.registerPlugin(SplitText, ScrollTrigger); + st.each(function(index, el) { + const mySplitText = new SplitText(el, { type: "lines,words,chars" }); + const chars = mySplitText.chars; + gsap.from(chars, { + scrollTrigger: { trigger: el, start: "top 90%", end: "top 60%", markers: false, toggleActions: "play none none none" }, + duration: 0.8, stagger: 0.02, opacity: 0, y: 20, ease: "power3.out" + }); }); } } - }, 500); + }, 850); - // 4. Grup: Parallax, Video, Counter & Magnific Popup (750ms) + // 7. Ağır Medya & Parallax (1000ms) setTimeout(function() { if ($('.parallaxie').length && $(window).width() > 991) { $('.parallaxie').parallaxie({ speed: 0.55, offset: 0 }); @@ -158,31 +176,16 @@ $('.counter').counterUp({ delay: 6, time: 2000 }); } if ($('.popup-video').length) { - $('.popup-video').magnificPopup({ - type: 'iframe', - mainClass: 'mfp-fade', - removalDelay: 160, - preloader: false, - fixedContentPos: true - }); + $('.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'); } - } + 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); + }, 1000); /* Contact form validation */ var $contactform = $("#contactForm");