259 lines
8.9 KiB
JavaScript
259 lines
8.9 KiB
JavaScript
(function ($) {
|
||
"use strict";
|
||
|
||
var $window = $(window);
|
||
var $body = $('body');
|
||
|
||
/* Preloader Effect */
|
||
$window.on('load', function(){
|
||
$(".preloader").fadeOut(600);
|
||
});
|
||
|
||
/* Sticky Header */
|
||
if($('.active-sticky-header').length){
|
||
var $headerSticky = $('header .header-sticky');
|
||
var $headerMain = $("header.main-header");
|
||
var cachedHeight = 0;
|
||
|
||
function setHeaderHeight(){
|
||
cachedHeight = $headerSticky.outerHeight();
|
||
$headerMain.css("height", cachedHeight);
|
||
}
|
||
|
||
$window.on('load resize', function(){
|
||
setHeaderHeight();
|
||
});
|
||
|
||
var ticking = false;
|
||
$window.on("scroll", function() {
|
||
if (!ticking) {
|
||
window.requestAnimationFrame(function() {
|
||
var fromTop = $window.scrollTop();
|
||
$headerSticky.toggleClass("hide", (fromTop > cachedHeight + 100));
|
||
$headerSticky.toggleClass("active", (fromTop > 600));
|
||
ticking = false;
|
||
});
|
||
ticking = true;
|
||
}
|
||
});
|
||
}
|
||
|
||
/* Slick Menu JS */
|
||
$('#menu').slicknav({
|
||
label : '',
|
||
prependTo : '.responsive-menu'
|
||
});
|
||
|
||
if($("a[href='#top']").length){
|
||
$(document).on("click", "a[href='#top']", function() {
|
||
$("html, body").animate({ scrollTop: 0 }, "slow");
|
||
return false;
|
||
});
|
||
}
|
||
|
||
/*
|
||
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);
|
||
|
||
// 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);
|
||
|
||
// 3. Grup: GSAP, ScrollTrigger & Text Effects (500ms)
|
||
setTimeout(function() {
|
||
if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {
|
||
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" } });
|
||
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);
|
||
|
||
// 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");
|
||
if($contactform.length) {
|
||
$contactform.validator({focus: false}).on("submit", function (event) {
|
||
if (!event.isDefaultPrevented()) {
|
||
event.preventDefault();
|
||
submitForm();
|
||
}
|
||
});
|
||
}
|
||
|
||
function submitForm(){
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "form-process.php",
|
||
data: $contactform.serialize(),
|
||
success : function(text){
|
||
if (text === "success"){
|
||
formSuccess();
|
||
} else {
|
||
submitMSG(false,text);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
function formSuccess(){
|
||
$contactform[0].reset();
|
||
submitMSG(true, "Message Sent Successfully!")
|
||
}
|
||
|
||
function submitMSG(valid, msg){
|
||
var msgClasses = valid ? "h4 text-success" : "h4 text-danger";
|
||
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
|
||
}
|
||
|
||
/* Appointment form validation */
|
||
var $appointmentForm = $("#appointmentForm");
|
||
if($appointmentForm.length) {
|
||
$appointmentForm.validator({focus: false}).on("submit", function (event) {
|
||
if (!event.isDefaultPrevented()) {
|
||
event.preventDefault();
|
||
submitappointmentForm();
|
||
}
|
||
});
|
||
}
|
||
|
||
function submitappointmentForm(){
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "form-appointment.php",
|
||
data: $appointmentForm.serialize(),
|
||
success : function(text){
|
||
if (text === "success"){
|
||
appointmentformSuccess();
|
||
} else {
|
||
appointmentsubmitMSG(false,text);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
function appointmentformSuccess(){
|
||
$appointmentForm[0].reset();
|
||
appointmentsubmitMSG(true, "Message Sent Successfully!")
|
||
}
|
||
|
||
function appointmentsubmitMSG(valid, msg){
|
||
var msgClasses = valid ? "h3 text-success" : "h3 text-danger";
|
||
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
|
||
}
|
||
|
||
})(jQuery); |