Files
tscb-site/js/function.js
keshavanand12 96e65d860f Fix homepage image display and animation issues
Update CSS to correct mobile display of the mission image and JavaScript to ensure animations trigger correctly on page load and prevent spamming.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d075e7a4-f667-4f28-b24a-2d29e4931850
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 5e85e2ff-f77c-4bb3-983c-222800a23422
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/e2c5cd18-6007-4bb1-a111-e14cc125923d/d075e7a4-f667-4f28-b24a-2d29e4931850/W9XaVKV
Replit-Helium-Checkpoint-Created: true
2026-03-17 22:51:17 +00:00

346 lines
13 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){
$window.on('resize', function(){
setHeaderHeight();
});
function setHeaderHeight(){
$("header.main-header").css("height", $('header .header-sticky').outerHeight());
}
$(window).on("scroll", function() {
var fromTop = $(window).scrollTop();
setHeaderHeight();
var headerHeight = $('header .header-sticky').outerHeight()
$("header .header-sticky").toggleClass("hide", (fromTop > headerHeight + 100));
$("header .header-sticky").toggleClass("active", (fromTop > 600));
});
}
/* Slick Menu JS */
$('#menu').slicknav({
label : '',
prependTo : '.responsive-menu'
});
if($("a[href='#top']").length){
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
}
/* 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,
},
});
/* Core Value Image Carousel JS */
if ($('.core-value-slider').length) {
const core_value_slider = new Swiper('.core-value-slider .swiper', {
slidesPerView : 1,
speed: 1000,
spaceBetween: 10,
loop: true,
autoplay: {
delay: 5000,
},
navigation: {
nextEl: '.core-value-button-next',
prevEl: '.core-value-button-prev',
},
});
}
/* Service Single Image Carousel JS */
if ($('.service-single-slider').length) {
const service_single_slider = new Swiper('.service-single-slider .swiper', {
slidesPerView : 1,
speed: 1000,
spaceBetween: 10,
loop: true,
autoplay: {
delay: 5000,
},
navigation: {
nextEl: '.service-single-button-next',
prevEl: '.service-single-button-prev',
},
});
}
/* Ministry Single Image Carousel JS */
if ($('.ministry-single-slider').length) {
const ministry_single_slider = new Swiper('.ministry-single-slider .swiper', {
slidesPerView : 1,
speed: 1000,
spaceBetween: 10,
loop: true,
autoplay: {
delay: 5000,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
}
/* Skill Bar */
if ($('.skills-progress-bar').length) {
$('.skills-progress-bar').waypoint(function() {
$('.skillbar').each(function() {
$(this).find('.count-bar').animate({
width:$(this).attr('data-percent')
},2000);
});
},{
offset: '50%'
});
}
/* Youtube Background Video JS */
if ($('#herovideo').length) {
var myPlayer = $("#herovideo").YTPlayer();
}
/* Audio JS */
const player = new Plyr('#player');
/* 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,
});
}
}
/* 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');
}
}
});
/* Contact form validation */
var $contactform = $("#contactForm");
$contactform.validator({focus: false}).on("submit", function (event) {
if (!event.isDefaultPrevented()) {
event.preventDefault();
submitForm();
}
});
function submitForm(){
/* Initiate Variables With Form Content*/
var fname = $("#fname").val();
var lname = $("#lname").val();
var email = $("#email").val();
var phone = $("#phone").val();
var message = $("#msg").val();
$.ajax({
type: "POST",
url: "form-process.php",
data: "fname=" + fname + "&lname=" + lname + "&email=" + email + "&phone=" + phone + "&message=" + message,
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){
if(valid){
var msgClasses = "h3 text-success";
} else {
var msgClasses = "h3 text-danger";
}
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}
/* Contact form validation end */
/* Animated Wow Js */
var wowInstance = new WOW({
mobile: true,
live: false,
offset: 0,
scrollContainer: null
});
wowInstance.init();
/* Re-trigger after page fully loads so elements already in the viewport
on scroll-restore also animate (fixes "nothing shows on reload" issue) */
$(window).on('load', function () {
setTimeout(function () {
window.dispatchEvent(new Event('scroll'));
}, 200);
});
/* Popup Video */
if ($('.popup-video').length) {
$('.popup-video').magnificPopup({
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: true
});
}
})(jQuery);