diff --git a/css/enhance.css b/css/enhance.css index 5dc0c7a..c4d2b50 100644 --- a/css/enhance.css +++ b/css/enhance.css @@ -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; } diff --git a/js/function.js b/js/function.js index a5fc19d..009b3c0 100644 --- a/js/function.js +++ b/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); - }); - - /* Sticky Header */ - if($('.active-sticky-header').length){ - $window.on('resize', function(){ - setHeaderHeight(); - }); + /* 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' - }); + 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; - }); - } + 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'); - - 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(); - } + /* 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 }); + 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); \ No newline at end of file