ayrisdev/muglasurucukursu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: spread initializations further and optimize scroll events for lower main thread work

Browse Source
This commit is contained in:
mstfyldz
2026-05-05 00:27:35 +03:00
parent 87bb4d6cd2
commit af263e5e23
1 changed files with 78 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
js/function.js
View File

@@ -9,7 +9,7 @@
$(".preloader").fadeOut(600); $(".preloader").fadeOut(600);
}); });
/* Sticky Header */ /* Sticky Header Optimizasyonu */
if($('.active-sticky-header').length){ if($('.active-sticky-header').length){
var $headerSticky = $('header .header-sticky'); var $headerSticky = $('header .header-sticky');
var $headerMain = $("header.main-header"); var $headerMain = $("header.main-header");
@@ -25,12 +25,20 @@
}); });
var ticking = false; var ticking = false;
$window.on("scroll", function() { $window.on("scroll", { passive: true }, function() {
if (!ticking) { if (!ticking) {
window.requestAnimationFrame(function() { window.requestAnimationFrame(function() {
var fromTop = $window.scrollTop(); var fromTop = $window.scrollTop();
$headerSticky.toggleClass("hide", (fromTop > cachedHeight + 100)); if (fromTop > cachedHeight + 100) {
$headerSticky.toggleClass("active", (fromTop > 600)); $headerSticky.addClass("hide");
} else {
$headerSticky.removeClass("hide");
}
if (fromTop > 600) {
$headerSticky.addClass("active");
} else {
$headerSticky.removeClass("active");
}
ticking = false; ticking = false;
}); });
ticking = true; ticking = true;
@@ -38,11 +46,13 @@
}); });
} }
/* Slick Menu JS */ /* Slick Menu JS (Staggered) */
$('#menu').slicknav({ setTimeout(function() {
label : '', $('#menu').slicknav({
prependTo : '.responsive-menu' label : '',
}); prependTo : '.responsive-menu'
});
}, 50);
if($("a[href='#top']").length){ if($("a[href='#top']").length){
$(document).on("click", "a[href='#top']", function() { $(document).on("click", "a[href='#top']", function() {
@@ -52,11 +62,11 @@
} }
/* /*
Sayfa performansını artırmak ve 'Layout Thrashing' hatalarını önlemek için AGRESİF SIRALI BAŞLATMA (Aggressive Sequential Initialization)
ağır kütüphaneleri kademeli (staggered) olarak başlatıyoruz. 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() { setTimeout(function() {
if ($('.hero-swiper').length) { if ($('.hero-swiper').length) {
new Swiper('.hero-swiper', { new Swiper('.hero-swiper', {
@@ -65,19 +75,10 @@
pagination: { el: '.swiper-pagination', clickable: true } pagination: { el: '.swiper-pagination', clickable: true }
}); });
} }
if ($('.hero-slider-layout .swiper').length) { }, 100);
new Swiper('.hero-slider-layout .swiper', {
slidesPerView: 1, speed: 1000, loop: true, autoplay: { delay: 4000 }, // 2. Services Swiper (250ms)
pagination: { el: '.hero-pagination', clickable: true } setTimeout(function() {
});
}
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) { if ($('.services-slider').length) {
new Swiper('.services-slider .swiper', { new Swiper('.services-slider .swiper', {
slidesPerView: 1, speed: 1000, spaceBetween: 30, loop: true, slidesPerView: 1, speed: 1000, spaceBetween: 30, loop: true,
@@ -86,6 +87,10 @@
breakpoints: { 768: { slidesPerView: 2 }, 991: { slidesPerView: 3 } } breakpoints: { 768: { slidesPerView: 2 }, 991: { slidesPerView: 3 } }
}); });
} }
}, 250);
// 3. Testimonial & Client Swipers (400ms)
setTimeout(function() {
if ($('.testimonial-slider').length) { if ($('.testimonial-slider').length) {
new Swiper('.testimonial-slider .swiper', { new Swiper('.testimonial-slider .swiper', {
slidesPerView: 1, speed: 1000, spaceBetween: 30, loop: true, slidesPerView: 1, speed: 1000, spaceBetween: 30, loop: true,
@@ -95,6 +100,23 @@
breakpoints: { 768: { slidesPerView: 2 }, 991: { slidesPerView: 3 } } 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) { if ($('.service-single-slider').length) {
new Swiper('.service-single-slider .swiper', { new Swiper('.service-single-slider .swiper', {
slidesPerView: 1, speed: 1000, spaceBetween: 30, loop: true, slidesPerView: 1, speed: 1000, spaceBetween: 30, loop: true,
@@ -102,51 +124,47 @@
pagination: { el: '.service-pagination', clickable: true } pagination: { el: '.service-pagination', clickable: true }
}); });
} }
}, 100); }, 550);
// 2. Grup: WOW.js & Animasyonlar (300ms) // 5. WOW.js Animasyonları (700ms)
setTimeout(function() { setTimeout(function() {
if (typeof WOW !== 'undefined') { if ($('.wow').length) {
new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true }).init(); new WOW().init();
} }
}, 300); }, 700);
// 3. Grup: GSAP, ScrollTrigger & Text Effects (500ms) // 6. GSAP & Metin Efektleri (850ms)
setTimeout(function() { setTimeout(function() {
if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') { if ($('.reveal').length) {
gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(ScrollTrigger);
// Image Reveal
let revealContainers = document.querySelectorAll(".reveal"); let revealContainers = document.querySelectorAll(".reveal");
revealContainers.forEach((container) => { revealContainers.forEach((container) => {
let image = container.querySelector("img"); 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.set(container, { autoAlpha: 1 });
tl.from(container, 1, { xPercent: -100, ease: Power2.out }); tl.from(container, 1.5, { xPercent: -100, ease: Power2.out });
tl.from(image, 1, { xPercent: 100, scale: 1, delay: -1, ease: Power2.out }); tl.from(image, 1.5, { xPercent: 100, scale: 1.3, delay: -1.5, ease: Power2.out });
}); });
}
// Text Styles if ($('.split-text-anim').length) {
if (typeof SplitText !== 'undefined') { let st = $(".split-text-anim");
document.querySelectorAll('.text-anime-style-1').forEach((el) => { if (st.length) {
let split = new SplitText(el, { type: "chars, words" }); gsap.registerPlugin(SplitText, ScrollTrigger);
gsap.from(split.words, { duration: 1, delay: 0.5, x: 20, autoAlpha: 0, stagger: 0.05, scrollTrigger: { trigger: el, start: "top 85%" } }); st.each(function(index, el) {
}); const mySplitText = new SplitText(el, { type: "lines,words,chars" });
document.querySelectorAll('.text-anime-style-2').forEach((el) => { const chars = mySplitText.chars;
let split = new SplitText(el, { type: "chars, words" }); gsap.from(chars, {
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%" } }); 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"
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); }, 850);
// 4. Grup: Parallax, Video, Counter & Magnific Popup (750ms) // 7. Ağır Medya & Parallax (1000ms)
setTimeout(function() { setTimeout(function() {
if ($('.parallaxie').length && $(window).width() > 991) { if ($('.parallaxie').length && $(window).width() > 991) {
$('.parallaxie').parallaxie({ speed: 0.55, offset: 0 }); $('.parallaxie').parallaxie({ speed: 0.55, offset: 0 });
@@ -158,31 +176,16 @@
$('.counter').counterUp({ delay: 6, time: 2000 }); $('.counter').counterUp({ delay: 6, time: 2000 });
} }
if ($('.popup-video').length) { if ($('.popup-video').length) {
$('.popup-video').magnificPopup({ $('.popup-video').magnificPopup({ type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: true });
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: true
});
} }
if ($('.gallery-items').length) { if ($('.gallery-items').length) {
$('.gallery-items').magnificPopup({ $('.gallery-items').magnificPopup({
delegate: 'a', delegate: 'a', type: 'image', closeOnContentClick: false, closeBtnInside: false,
type: 'image', mainClass: 'mfp-with-zoom', image: { verticalFit: true }, gallery: { enabled: true },
closeOnContentClick: false, zoom: { enabled: true, duration: 300, opener: function(element) { return element.find('img'); } }
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 */ /* Contact form validation */
var $contactform = $("#contactForm"); var $contactform = $("#contactForm");