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 image at tablet: clear the circle-offset padding */
|
||||||
.mission-img {
|
.mission-img {
|
||||||
padding: 0 0 0 0 !important;
|
padding: 0 !important;
|
||||||
text-align: center !important;
|
text-align: center !important;
|
||||||
margin-top: 30px !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 {
|
.mission-img img {
|
||||||
|
height: auto !important;
|
||||||
aspect-ratio: 16 / 9 !important;
|
aspect-ratio: 16 / 9 !important;
|
||||||
border-radius: 0 0 50px 0 !important;
|
border-radius: 0 0 50px 0 !important;
|
||||||
}
|
}
|
||||||
@@ -1044,9 +1052,8 @@ body {
|
|||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mission-img figure,
|
/* Tighter corner radius at phone size; display:block & height:auto inherit from 991px */
|
||||||
.mission-img img {
|
.mission-img img {
|
||||||
aspect-ratio: 16 / 9 !important;
|
|
||||||
border-radius: 0 0 40px 0 !important;
|
border-radius: 0 0 40px 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
573
js/function.js
573
js/function.js
@@ -1,140 +1,140 @@
|
|||||||
(function ($) {
|
(function ($) {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
var $window = $(window);
|
var $window = $(window);
|
||||||
var $body = $('body');
|
var $body = $('body');
|
||||||
|
|
||||||
/* Preloader Effect */
|
/* Preloader Effect */
|
||||||
$window.on('load', function(){
|
$window.on('load', function(){
|
||||||
$(".preloader").fadeOut(600);
|
$(".preloader").fadeOut(600);
|
||||||
});
|
});
|
||||||
|
|
||||||
/* Sticky Header */
|
/* Sticky Header */
|
||||||
if($('.active-sticky-header').length){
|
if($('.active-sticky-header').length){
|
||||||
$window.on('resize', function(){
|
$window.on('resize', function(){
|
||||||
setHeaderHeight();
|
setHeaderHeight();
|
||||||
});
|
});
|
||||||
|
|
||||||
function setHeaderHeight(){
|
function setHeaderHeight(){
|
||||||
$("header.main-header").css("height", $('header .header-sticky').outerHeight());
|
$("header.main-header").css("height", $('header .header-sticky').outerHeight());
|
||||||
}
|
}
|
||||||
|
|
||||||
$(window).on("scroll", function() {
|
$(window).on("scroll", function() {
|
||||||
var fromTop = $(window).scrollTop();
|
var fromTop = $(window).scrollTop();
|
||||||
setHeaderHeight();
|
setHeaderHeight();
|
||||||
var headerHeight = $('header .header-sticky').outerHeight()
|
var headerHeight = $('header .header-sticky').outerHeight()
|
||||||
$("header .header-sticky").toggleClass("hide", (fromTop > headerHeight + 100));
|
$("header .header-sticky").toggleClass("hide", (fromTop > headerHeight + 100));
|
||||||
$("header .header-sticky").toggleClass("active", (fromTop > 600));
|
$("header .header-sticky").toggleClass("active", (fromTop > 600));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Slick Menu JS */
|
/* Slick Menu JS */
|
||||||
$('#menu').slicknav({
|
$('#menu').slicknav({
|
||||||
label : '',
|
label : '',
|
||||||
prependTo : '.responsive-menu'
|
prependTo : '.responsive-menu'
|
||||||
});
|
});
|
||||||
|
|
||||||
if($("a[href='#top']").length){
|
if($("a[href='#top']").length){
|
||||||
$("a[href='#top']").click(function() {
|
$("a[href='#top']").click(function() {
|
||||||
$("html, body").animate({ scrollTop: 0 }, "slow");
|
$("html, body").animate({ scrollTop: 0 }, "slow");
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hero Slider Layout JS */
|
/* Hero Slider Layout JS */
|
||||||
const hero_slider_layout = new Swiper('.hero-slider-layout .swiper', {
|
const hero_slider_layout = new Swiper('.hero-slider-layout .swiper', {
|
||||||
slidesPerView : 1,
|
slidesPerView : 1,
|
||||||
speed: 1000,
|
speed: 1000,
|
||||||
spaceBetween: 0,
|
spaceBetween: 0,
|
||||||
loop: true,
|
loop: true,
|
||||||
autoplay: {
|
autoplay: {
|
||||||
delay: 4000,
|
delay: 4000,
|
||||||
},
|
},
|
||||||
pagination: {
|
pagination: {
|
||||||
el: '.hero-pagination',
|
el: '.hero-pagination',
|
||||||
clickable: true,
|
clickable: true,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
/* Core Value Image Carousel JS */
|
/* Core Value Image Carousel JS */
|
||||||
if ($('.core-value-slider').length) {
|
if ($('.core-value-slider').length) {
|
||||||
const core_value_slider = new Swiper('.core-value-slider .swiper', {
|
const core_value_slider = new Swiper('.core-value-slider .swiper', {
|
||||||
slidesPerView : 1,
|
slidesPerView : 1,
|
||||||
speed: 1000,
|
speed: 1000,
|
||||||
spaceBetween: 10,
|
spaceBetween: 10,
|
||||||
loop: true,
|
loop: true,
|
||||||
autoplay: {
|
autoplay: {
|
||||||
delay: 5000,
|
delay: 5000,
|
||||||
},
|
},
|
||||||
navigation: {
|
navigation: {
|
||||||
nextEl: '.core-value-button-next',
|
nextEl: '.core-value-button-next',
|
||||||
prevEl: '.core-value-button-prev',
|
prevEl: '.core-value-button-prev',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Service Single Image Carousel JS */
|
/* Service Single Image Carousel JS */
|
||||||
if ($('.service-single-slider').length) {
|
if ($('.service-single-slider').length) {
|
||||||
const service_single_slider = new Swiper('.service-single-slider .swiper', {
|
const service_single_slider = new Swiper('.service-single-slider .swiper', {
|
||||||
slidesPerView : 1,
|
slidesPerView : 1,
|
||||||
speed: 1000,
|
speed: 1000,
|
||||||
spaceBetween: 10,
|
spaceBetween: 10,
|
||||||
loop: true,
|
loop: true,
|
||||||
autoplay: {
|
autoplay: {
|
||||||
delay: 5000,
|
delay: 5000,
|
||||||
},
|
},
|
||||||
navigation: {
|
navigation: {
|
||||||
nextEl: '.service-single-button-next',
|
nextEl: '.service-single-button-next',
|
||||||
prevEl: '.service-single-button-prev',
|
prevEl: '.service-single-button-prev',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ministry Single Image Carousel JS */
|
/* Ministry Single Image Carousel JS */
|
||||||
if ($('.ministry-single-slider').length) {
|
if ($('.ministry-single-slider').length) {
|
||||||
const ministry_single_slider = new Swiper('.ministry-single-slider .swiper', {
|
const ministry_single_slider = new Swiper('.ministry-single-slider .swiper', {
|
||||||
slidesPerView : 1,
|
slidesPerView : 1,
|
||||||
speed: 1000,
|
speed: 1000,
|
||||||
spaceBetween: 10,
|
spaceBetween: 10,
|
||||||
loop: true,
|
loop: true,
|
||||||
autoplay: {
|
autoplay: {
|
||||||
delay: 5000,
|
delay: 5000,
|
||||||
},
|
},
|
||||||
pagination: {
|
pagination: {
|
||||||
el: '.swiper-pagination',
|
el: '.swiper-pagination',
|
||||||
clickable: true,
|
clickable: true,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Skill Bar */
|
/* Skill Bar */
|
||||||
if ($('.skills-progress-bar').length) {
|
if ($('.skills-progress-bar').length) {
|
||||||
$('.skills-progress-bar').waypoint(function() {
|
$('.skills-progress-bar').waypoint(function() {
|
||||||
$('.skillbar').each(function() {
|
$('.skillbar').each(function() {
|
||||||
$(this).find('.count-bar').animate({
|
$(this).find('.count-bar').animate({
|
||||||
width:$(this).attr('data-percent')
|
width:$(this).attr('data-percent')
|
||||||
},2000);
|
},2000);
|
||||||
});
|
});
|
||||||
},{
|
},{
|
||||||
offset: '50%'
|
offset: '50%'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Youtube Background Video JS */
|
/* Youtube Background Video JS */
|
||||||
if ($('#herovideo').length) {
|
if ($('#herovideo').length) {
|
||||||
var myPlayer = $("#herovideo").YTPlayer();
|
var myPlayer = $("#herovideo").YTPlayer();
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Audio JS */
|
/* Audio JS */
|
||||||
const player = new Plyr('#player');
|
const player = new Plyr('#player');
|
||||||
|
|
||||||
/* Init Counter */
|
/* Init Counter */
|
||||||
if ($('.counter').length) {
|
if ($('.counter').length) {
|
||||||
$('.counter').counterUp({ delay: 6, time: 3000 });
|
$('.counter').counterUp({ delay: 6, time: 3000 });
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Image Reveal Animation */
|
/* Image Reveal Animation */
|
||||||
if ($('.reveal').length) {
|
if ($('.reveal').length) {
|
||||||
gsap.registerPlugin(ScrollTrigger);
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
let revealContainers = document.querySelectorAll(".reveal");
|
let revealContainers = document.querySelectorAll(".reveal");
|
||||||
revealContainers.forEach((container) => {
|
revealContainers.forEach((container) => {
|
||||||
@@ -161,173 +161,186 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Text Effect Animation */
|
/* Text Effect Animation */
|
||||||
if ($('.text-anime-style-1').length) {
|
if ($('.text-anime-style-1').length) {
|
||||||
let staggerAmount = 0.05,
|
let staggerAmount = 0.05,
|
||||||
translateXValue = 0,
|
translateXValue = 0,
|
||||||
delayValue = 0.5,
|
delayValue = 0.5,
|
||||||
animatedTextElements = document.querySelectorAll('.text-anime-style-1');
|
animatedTextElements = document.querySelectorAll('.text-anime-style-1');
|
||||||
|
|
||||||
animatedTextElements.forEach((element) => {
|
animatedTextElements.forEach((element) => {
|
||||||
let animationSplitText = new SplitText(element, { type: "chars, words" });
|
let animationSplitText = new SplitText(element, { type: "chars, words" });
|
||||||
gsap.from(animationSplitText.words, {
|
gsap.from(animationSplitText.words, {
|
||||||
duration: 1,
|
duration: 1,
|
||||||
delay: delayValue,
|
delay: delayValue,
|
||||||
x: 20,
|
x: 20,
|
||||||
autoAlpha: 0,
|
autoAlpha: 0,
|
||||||
stagger: staggerAmount,
|
stagger: staggerAmount,
|
||||||
scrollTrigger: { trigger: element, start: "top 85%" },
|
scrollTrigger: { trigger: element, start: "top 85%" },
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($('.text-anime-style-2').length) {
|
if ($('.text-anime-style-2').length) {
|
||||||
let staggerAmount = 0.03,
|
let staggerAmount = 0.03,
|
||||||
translateXValue = 20,
|
translateXValue = 20,
|
||||||
delayValue = 0.1,
|
delayValue = 0.1,
|
||||||
easeType = "power2.out",
|
easeType = "power2.out",
|
||||||
animatedTextElements = document.querySelectorAll('.text-anime-style-2');
|
animatedTextElements = document.querySelectorAll('.text-anime-style-2');
|
||||||
|
|
||||||
animatedTextElements.forEach((element) => {
|
animatedTextElements.forEach((element) => {
|
||||||
let animationSplitText = new SplitText(element, { type: "chars, words" });
|
let animationSplitText = new SplitText(element, { type: "chars, words" });
|
||||||
gsap.from(animationSplitText.chars, {
|
gsap.from(animationSplitText.chars, {
|
||||||
duration: 1,
|
duration: 1,
|
||||||
delay: delayValue,
|
delay: delayValue,
|
||||||
x: translateXValue,
|
x: translateXValue,
|
||||||
autoAlpha: 0,
|
autoAlpha: 0,
|
||||||
stagger: staggerAmount,
|
stagger: staggerAmount,
|
||||||
ease: easeType,
|
ease: easeType,
|
||||||
scrollTrigger: { trigger: element, start: "top 85%"},
|
scrollTrigger: { trigger: element, start: "top 85%"},
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($('.text-anime-style-3').length) {
|
if ($('.text-anime-style-3').length) {
|
||||||
let animatedTextElements = document.querySelectorAll('.text-anime-style-3');
|
let animatedTextElements = document.querySelectorAll('.text-anime-style-3');
|
||||||
|
|
||||||
animatedTextElements.forEach((element) => {
|
animatedTextElements.forEach((element) => {
|
||||||
//Reset if needed
|
//Reset if needed
|
||||||
if (element.animation) {
|
if (element.animation) {
|
||||||
element.animation.progress(1).kill();
|
element.animation.progress(1).kill();
|
||||||
element.split.revert();
|
element.split.revert();
|
||||||
}
|
}
|
||||||
|
|
||||||
element.split = new SplitText(element, {
|
element.split = new SplitText(element, {
|
||||||
type: "lines,words,chars",
|
type: "lines,words,chars",
|
||||||
linesClass: "split-line",
|
linesClass: "split-line",
|
||||||
});
|
});
|
||||||
gsap.set(element, { perspective: 400 });
|
gsap.set(element, { perspective: 400 });
|
||||||
|
|
||||||
gsap.set(element.split.chars, {
|
gsap.set(element.split.chars, {
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
x: "50",
|
x: "50",
|
||||||
});
|
});
|
||||||
|
|
||||||
element.animation = gsap.to(element.split.chars, {
|
element.animation = gsap.to(element.split.chars, {
|
||||||
scrollTrigger: { trigger: element, start: "top 90%" },
|
scrollTrigger: { trigger: element, start: "top 90%" },
|
||||||
x: "0",
|
x: "0",
|
||||||
y: "0",
|
y: "0",
|
||||||
rotateX: "0",
|
rotateX: "0",
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
duration: 1,
|
duration: 1,
|
||||||
ease: Back.easeOut,
|
ease: Back.easeOut,
|
||||||
stagger: 0.02,
|
stagger: 0.02,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Parallaxie js */
|
/* Parallaxie js */
|
||||||
var $parallaxie = $('.parallaxie');
|
var $parallaxie = $('.parallaxie');
|
||||||
if($parallaxie.length && ($window.width() > 991))
|
if($parallaxie.length && ($window.width() > 991))
|
||||||
{
|
{
|
||||||
if ($window.width() > 768) {
|
if ($window.width() > 768) {
|
||||||
$parallaxie.parallaxie({
|
$parallaxie.parallaxie({
|
||||||
speed: 0.55,
|
speed: 0.55,
|
||||||
offset: 0,
|
offset: 0,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Zoom Gallery screenshot */
|
/* Zoom Gallery screenshot */
|
||||||
$('.gallery-items').magnificPopup({
|
$('.gallery-items').magnificPopup({
|
||||||
delegate: 'a',
|
delegate: 'a',
|
||||||
type: 'image',
|
type: 'image',
|
||||||
closeOnContentClick: false,
|
closeOnContentClick: false,
|
||||||
closeBtnInside: false,
|
closeBtnInside: false,
|
||||||
mainClass: 'mfp-with-zoom',
|
mainClass: 'mfp-with-zoom',
|
||||||
image: {
|
image: {
|
||||||
verticalFit: true,
|
verticalFit: true,
|
||||||
},
|
},
|
||||||
gallery: {
|
gallery: {
|
||||||
enabled: true
|
enabled: true
|
||||||
},
|
},
|
||||||
zoom: {
|
zoom: {
|
||||||
enabled: true,
|
enabled: true,
|
||||||
duration: 300, // don't foget to change the duration also in CSS
|
duration: 300, // don't foget to change the duration also in CSS
|
||||||
opener: function(element) {
|
opener: function(element) {
|
||||||
return element.find('img');
|
return element.find('img');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
/* Contact form validation */
|
/* Contact form validation */
|
||||||
var $contactform = $("#contactForm");
|
var $contactform = $("#contactForm");
|
||||||
$contactform.validator({focus: false}).on("submit", function (event) {
|
$contactform.validator({focus: false}).on("submit", function (event) {
|
||||||
if (!event.isDefaultPrevented()) {
|
if (!event.isDefaultPrevented()) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
submitForm();
|
submitForm();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function submitForm(){
|
function submitForm(){
|
||||||
/* Initiate Variables With Form Content*/
|
/* Initiate Variables With Form Content*/
|
||||||
var fname = $("#fname").val();
|
var fname = $("#fname").val();
|
||||||
var lname = $("#lname").val();
|
var lname = $("#lname").val();
|
||||||
var email = $("#email").val();
|
var email = $("#email").val();
|
||||||
var phone = $("#phone").val();
|
var phone = $("#phone").val();
|
||||||
var message = $("#msg").val();
|
var message = $("#msg").val();
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: "POST",
|
type: "POST",
|
||||||
url: "form-process.php",
|
url: "form-process.php",
|
||||||
data: "fname=" + fname + "&lname=" + lname + "&email=" + email + "&phone=" + phone + "&message=" + message,
|
data: "fname=" + fname + "&lname=" + lname + "&email=" + email + "&phone=" + phone + "&message=" + message,
|
||||||
success : function(text){
|
success : function(text){
|
||||||
if (text == "success"){
|
if (text == "success"){
|
||||||
formSuccess();
|
formSuccess();
|
||||||
} else {
|
} else {
|
||||||
submitMSG(false,text);
|
submitMSG(false,text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function formSuccess(){
|
function formSuccess(){
|
||||||
$contactform[0].reset();
|
$contactform[0].reset();
|
||||||
submitMSG(true, "Message Sent Successfully!")
|
submitMSG(true, "Message Sent Successfully!")
|
||||||
}
|
}
|
||||||
|
|
||||||
function submitMSG(valid, msg){
|
function submitMSG(valid, msg){
|
||||||
if(valid){
|
if(valid){
|
||||||
var msgClasses = "h3 text-success";
|
var msgClasses = "h3 text-success";
|
||||||
} else {
|
} else {
|
||||||
var msgClasses = "h3 text-danger";
|
var msgClasses = "h3 text-danger";
|
||||||
}
|
}
|
||||||
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
|
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
|
||||||
}
|
}
|
||||||
/* Contact form validation end */
|
/* Contact form validation end */
|
||||||
|
|
||||||
/* Animated Wow Js */
|
/* Animated Wow Js */
|
||||||
new WOW().init();
|
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 */
|
/* Popup Video */
|
||||||
if ($('.popup-video').length) {
|
if ($('.popup-video').length) {
|
||||||
$('.popup-video').magnificPopup({
|
$('.popup-video').magnificPopup({
|
||||||
type: 'iframe',
|
type: 'iframe',
|
||||||
mainClass: 'mfp-fade',
|
mainClass: 'mfp-fade',
|
||||||
removalDelay: 160,
|
removalDelay: 160,
|
||||||
preloader: false,
|
preloader: false,
|
||||||
fixedContentPos: true
|
fixedContentPos: true
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
Reference in New Issue
Block a user