63 lines
2 KiB
JavaScript
63 lines
2 KiB
JavaScript
// Contact page specific scripts
|
|
|
|
// Form submission
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const contactForm = document.getElementById("contactForm");
|
|
if (contactForm) {
|
|
contactForm.addEventListener("submit", (e) => {
|
|
e.preventDefault();
|
|
alert(
|
|
"Thank you for your message! We'll get back to you within 24 hours."
|
|
);
|
|
contactForm.reset();
|
|
});
|
|
}
|
|
|
|
// Staggered entrance for hero and sections
|
|
window.addEventListener("load", () => {
|
|
const heroTitle = document.querySelector(
|
|
"section.relative h1.masked-reveal"
|
|
);
|
|
const heroSub = document.querySelector("section.relative div.text-xl");
|
|
if (heroTitle) {
|
|
heroTitle.style.animation = "maskReveal 900ms ease-out 150ms forwards";
|
|
}
|
|
if (heroSub) {
|
|
heroSub.style.opacity = "0";
|
|
heroSub.style.animation = "fadeUp 700ms ease-out 320ms forwards";
|
|
}
|
|
|
|
const contactSectionFade = document.querySelector("section.py-20.bg-white");
|
|
if (contactSectionFade) {
|
|
contactSectionFade.style.opacity = "0";
|
|
contactSectionFade.style.animation =
|
|
"fadeUp 800ms ease-out 600ms forwards";
|
|
}
|
|
|
|
const mapSection = document.querySelector("section.py-20.bg-kh3-black");
|
|
if (mapSection) {
|
|
mapSection.style.opacity = "0";
|
|
mapSection.style.animation = "fadeUp 800ms ease-out 850ms forwards";
|
|
}
|
|
});
|
|
|
|
// Gentle auto-scroll like WHAT page: nudge ~1.1vh after 3s with easing
|
|
setTimeout(() => {
|
|
const startScroll = window.pageYOffset;
|
|
const targetScroll = window.innerHeight * 1.0;
|
|
const distance = targetScroll - startScroll;
|
|
const duration = 2000;
|
|
let start = null;
|
|
|
|
function animateScroll(ts) {
|
|
if (start === null) start = ts;
|
|
const elapsed = ts - start;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
|
window.scrollTo(0, startScroll + distance * easeOutQuart);
|
|
if (progress < 1) requestAnimationFrame(animateScroll);
|
|
}
|
|
|
|
requestAnimationFrame(animateScroll);
|
|
}, 3000);
|
|
});
|