perf: delay heavy JS initializations to reduce main-thread work
This commit is contained in:
mstfyldz
488
js/function.js
488
js/function.js
@@ -51,244 +51,251 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hero Slider Layout JS */
|
/* Delay heavy initializations to improve TBT and Main Thread work */
|
||||||
const hero_slider_layout = new Swiper('.hero-slider-layout .swiper', {
|
setTimeout(function() {
|
||||||
slidesPerView : 1,
|
/* Hero Slider Layout JS */
|
||||||
speed: 1000,
|
const hero_slider_layout = new Swiper('.hero-slider-layout .swiper', {
|
||||||
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', {
|
|
||||||
slidesPerView : 1,
|
slidesPerView : 1,
|
||||||
speed: 1000,
|
speed: 1000,
|
||||||
spaceBetween: 30,
|
spaceBetween: 0,
|
||||||
loop: true,
|
loop: true,
|
||||||
autoplay: {
|
autoplay: {
|
||||||
delay: 5000,
|
delay: 4000,
|
||||||
},
|
},
|
||||||
pagination: {
|
pagination: {
|
||||||
el: '.services-pagination',
|
el: '.hero-pagination',
|
||||||
clickable: true,
|
clickable: true,
|
||||||
},
|
},
|
||||||
breakpoints: {
|
|
||||||
768:{
|
|
||||||
slidesPerView: 2,
|
|
||||||
},
|
|
||||||
991:{
|
|
||||||
slidesPerView: 3,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
/* testimonial Slider JS */
|
/* testimonial Slider JS */
|
||||||
if ($('.testimonial-slider').length) {
|
if ($('.hero-client-slider').length) {
|
||||||
const testimonial_slider = new Swiper('.testimonial-slider .swiper', {
|
const testimonial_slider = new Swiper('.hero-client-slider .swiper', {
|
||||||
slidesPerView : 1,
|
slidesPerView : 2,
|
||||||
speed: 1000,
|
speed: 1000,
|
||||||
spaceBetween: 30,
|
spaceBetween: 30,
|
||||||
loop: true,
|
loop: true,
|
||||||
autoplay: {
|
autoplay: {
|
||||||
delay: 5000,
|
delay: 5000,
|
||||||
},
|
|
||||||
pagination: {
|
|
||||||
el: '.testimonial-pagination',
|
|
||||||
clickable: true,
|
|
||||||
},
|
|
||||||
navigation: {
|
|
||||||
nextEl: '.testimonial-button-next',
|
|
||||||
prevEl: '.testimonial-button-prev',
|
|
||||||
},
|
|
||||||
breakpoints: {
|
|
||||||
768:{
|
|
||||||
slidesPerView: 2,
|
|
||||||
},
|
},
|
||||||
991:{
|
breakpoints: {
|
||||||
slidesPerView: 3,
|
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 */
|
/* Zoom Gallery screenshot */
|
||||||
@@ -315,12 +322,14 @@
|
|||||||
|
|
||||||
/* Contact form validation */
|
/* Contact form validation */
|
||||||
var $contactform = $("#contactForm");
|
var $contactform = $("#contactForm");
|
||||||
$contactform.validator({focus: false}).on("submit", function (event) {
|
if($contactform.length) {
|
||||||
if (!event.isDefaultPrevented()) {
|
$contactform.validator({focus: false}).on("submit", function (event) {
|
||||||
event.preventDefault();
|
if (!event.isDefaultPrevented()) {
|
||||||
submitForm();
|
event.preventDefault();
|
||||||
}
|
submitForm();
|
||||||
});
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function submitForm(){
|
function submitForm(){
|
||||||
/* Ajax call to submit form */
|
/* Ajax call to submit form */
|
||||||
@@ -351,16 +360,17 @@
|
|||||||
}
|
}
|
||||||
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
|
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
|
||||||
}
|
}
|
||||||
/* Contact form validation end */
|
|
||||||
|
|
||||||
/* Appointment form validation */
|
/* Appointment form validation */
|
||||||
var $appointmentForm = $("#appointmentForm");
|
var $appointmentForm = $("#appointmentForm");
|
||||||
$appointmentForm.validator({focus: false}).on("submit", function (event) {
|
if($appointmentForm.length) {
|
||||||
if (!event.isDefaultPrevented()) {
|
$appointmentForm.validator({focus: false}).on("submit", function (event) {
|
||||||
event.preventDefault();
|
if (!event.isDefaultPrevented()) {
|
||||||
submitappointmentForm();
|
event.preventDefault();
|
||||||
}
|
submitappointmentForm();
|
||||||
});
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function submitappointmentForm(){
|
function submitappointmentForm(){
|
||||||
/* Ajax call to submit form */
|
/* Ajax call to submit form */
|
||||||
@@ -391,10 +401,6 @@
|
|||||||
}
|
}
|
||||||
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
|
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
|
||||||
}
|
}
|
||||||
/* Appointment form validation end */
|
|
||||||
|
|
||||||
/* Animated Wow Js */
|
|
||||||
new WOW().init();
|
|
||||||
|
|
||||||
/* Popup Video */
|
/* Popup Video */
|
||||||
if ($('.popup-video').length) {
|
if ($('.popup-video').length) {
|
||||||
|
|||||||
Reference in New Issue
Block a user