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
This commit is contained in:
keshavanand12
@@ -973,13 +973,21 @@ body {
|
||||
|
||||
/* Mission image at tablet: clear the circle-offset padding */
|
||||
.mission-img {
|
||||
padding: 0 0 0 0 !important;
|
||||
padding: 0 !important;
|
||||
text-align: center !important;
|
||||
margin-top: 30px !important;
|
||||
}
|
||||
|
||||
.mission-img figure,
|
||||
/* Fix inline-flex reveal figure so it fills full width on mobile */
|
||||
.mission-img .reveal,
|
||||
.mission-img figure {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Landscape aspect-ratio on mobile; override height:100% from .reveal img */
|
||||
.mission-img img {
|
||||
height: auto !important;
|
||||
aspect-ratio: 16 / 9 !important;
|
||||
border-radius: 0 0 50px 0 !important;
|
||||
}
|
||||
@@ -1044,9 +1052,8 @@ body {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.mission-img figure,
|
||||
/* Tighter corner radius at phone size; display:block & height:auto inherit from 991px */
|
||||
.mission-img img {
|
||||
aspect-ratio: 16 / 9 !important;
|
||||
border-radius: 0 0 40px 0 !important;
|
||||
}
|
||||
|
||||
|
||||
553
js/function.js
553
js/function.js
@@ -1,140 +1,140 @@
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
var $window = $(window);
|
||||
var $body = $('body');
|
||||
var $window = $(window);
|
||||
var $body = $('body');
|
||||
|
||||
/* Preloader Effect */
|
||||
$window.on('load', function(){
|
||||
$(".preloader").fadeOut(600);
|
||||
});
|
||||
/* Preloader Effect */
|
||||
$window.on('load', function(){
|
||||
$(".preloader").fadeOut(600);
|
||||
});
|
||||
|
||||
/* Sticky Header */
|
||||
if($('.active-sticky-header').length){
|
||||
$window.on('resize', function(){
|
||||
setHeaderHeight();
|
||||
});
|
||||
/* Sticky Header */
|
||||
if($('.active-sticky-header').length){
|
||||
$window.on('resize', function(){
|
||||
setHeaderHeight();
|
||||
});
|
||||
|
||||
function setHeaderHeight(){
|
||||
$("header.main-header").css("height", $('header .header-sticky').outerHeight());
|
||||
}
|
||||
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));
|
||||
});
|
||||
}
|
||||
$(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'
|
||||
});
|
||||
/* 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;
|
||||
});
|
||||
}
|
||||
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,
|
||||
},
|
||||
});
|
||||
/* 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',
|
||||
},
|
||||
});
|
||||
}
|
||||
/* 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',
|
||||
},
|
||||
});
|
||||
}
|
||||
/* 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,
|
||||
},
|
||||
});
|
||||
}
|
||||
/* 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%'
|
||||
});
|
||||
}
|
||||
/* 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();
|
||||
}
|
||||
/* Youtube Background Video JS */
|
||||
if ($('#herovideo').length) {
|
||||
var myPlayer = $("#herovideo").YTPlayer();
|
||||
}
|
||||
|
||||
/* Audio JS */
|
||||
const player = new Plyr('#player');
|
||||
/* Audio JS */
|
||||
const player = new Plyr('#player');
|
||||
|
||||
/* Init Counter */
|
||||
if ($('.counter').length) {
|
||||
$('.counter').counterUp({ delay: 6, time: 3000 });
|
||||
}
|
||||
/* Init Counter */
|
||||
if ($('.counter').length) {
|
||||
$('.counter').counterUp({ delay: 6, time: 3000 });
|
||||
}
|
||||
|
||||
/* Image Reveal Animation */
|
||||
if ($('.reveal').length) {
|
||||
/* Image Reveal Animation */
|
||||
if ($('.reveal').length) {
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
let revealContainers = document.querySelectorAll(".reveal");
|
||||
revealContainers.forEach((container) => {
|
||||
@@ -161,173 +161,186 @@
|
||||
});
|
||||
}
|
||||
|
||||
/* 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');
|
||||
/* 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%" },
|
||||
});
|
||||
});
|
||||
}
|
||||
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');
|
||||
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%"},
|
||||
});
|
||||
});
|
||||
}
|
||||
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');
|
||||
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();
|
||||
}
|
||||
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 });
|
||||
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",
|
||||
});
|
||||
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,
|
||||
});
|
||||
});
|
||||
}
|
||||
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,
|
||||
});
|
||||
}
|
||||
}
|
||||
/* 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');
|
||||
}
|
||||
}
|
||||
});
|
||||
/* 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();
|
||||
}
|
||||
});
|
||||
/* 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();
|
||||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
$.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 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 */
|
||||
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 */
|
||||
new WOW().init();
|
||||
/* 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
|
||||
});
|
||||
}
|
||||
/* 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