perf: stagger JS initializations and remove duplicates to eliminate layout thrashing
This commit is contained in:
mstfyldz
413
js/function.js
413
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.
|
||||
*/
|
||||
|
||||
/* 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,
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// 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);
|
||||
|
||||
/* 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,
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// 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);
|
||||
|
||||
/* 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,
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// 3. Grup: GSAP, ScrollTrigger & Text Effects (500ms)
|
||||
setTimeout(function() {
|
||||
if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
/* 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
|
||||
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 });
|
||||
});
|
||||
|
||||
/* 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 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);
|
||||
|
||||
/* 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);
|
||||
Reference in New Issue
Block a user