/* ========================================================================== MOMS — SIGNATURE CURRY POWDER Vanilla JS: reveals, pouch motion, tilt, accordion ========================================================================== */ (() => { "use strict"; const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; /* --------------------------------------------------------------------- NAV — background on scroll --------------------------------------------------------------------- */ const nav = document.querySelector(".nav"); const onNavScroll = () => { nav.classList.toggle("is-scrolled", window.scrollY > 40); }; onNavScroll(); window.addEventListener("scroll", onNavScroll, { passive: true }); /* --------------------------------------------------------------------- SCROLL REVEAL — IntersectionObserver --------------------------------------------------------------------- */ const revealEls = document.querySelectorAll("[data-reveal], [data-reveal-text]"); // Split reveal-text lines into spans for staggered entrance document.querySelectorAll("[data-reveal-text] .line").forEach((line, i) => { const text = line.textContent; line.textContent = ""; const span = document.createElement("span"); span.textContent = text; span.style.display = "inline-block"; span.style.transform = "translateY(110%)"; span.style.transition = `transform 1s var(--ease-out) ${i * 0.12}s`; line.appendChild(span); }); const revealObserver = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("is-visible"); if (entry.target.hasAttribute("data-reveal-text")) { entry.target.querySelectorAll(".line span").forEach((span) => { span.style.transform = "translateY(0)"; }); } revealObserver.unobserve(entry.target); } }); }, { threshold: 0.15, rootMargin: "0px 0px -8% 0px" } ); revealEls.forEach((el) => revealObserver.observe(el)); /* --------------------------------------------------------------------- HERO POUCH — load-in, mouse parallax, scroll rotation --------------------------------------------------------------------- */ const pouch = document.getElementById("pouch"); const stage = document.getElementById("pouchStage"); window.addEventListener("load", () => { requestAnimationFrame(() => pouch.classList.add("is-loaded")); }); let mouseX = 0, mouseY = 0, curX = 0, curY = 0; if (!prefersReducedMotion && pouch) { window.addEventListener("pointermove", (e) => { const cx = window.innerWidth / 2; const cy = window.innerHeight / 2; mouseX = (e.clientX - cx) / cx; mouseY = (e.clientY - cy) / cy; }); } let scrollRotation = 0; const heroSection = document.querySelector(".hero"); function updatePouchTransform() { // Ease mouse values for smoothness curX += (mouseX - curX) * 0.06; curY += (mouseY - curY) * 0.06; if (pouch) { const heroRect = heroSection.getBoundingClientRect(); const heroProgress = Math.min(Math.max(-heroRect.top / (heroRect.height || 1), 0), 1); const rotY = curX * 14 + heroProgress * 50; const rotX = -curY * 10; const scale = 1 - heroProgress * 0.35; const translateZ = -heroProgress * 220; const translateY = heroProgress * -40; pouch.style.transform = `translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotX}deg) rotateY(${rotY}deg) scale(${Math.max(scale, 0.55)})`; pouch.style.opacity = pouch.classList.contains("is-loaded") ? Math.max(1 - heroProgress * 1.4, 0) : 0; } requestAnimationFrame(updatePouchTransform); } requestAnimationFrame(updatePouchTransform); /* --------------------------------------------------------------------- INGREDIENT CARD 3D TILT --------------------------------------------------------------------- */ if (!prefersReducedMotion) { document.querySelectorAll("[data-tilt]").forEach((card) => { card.addEventListener("pointermove", (e) => { const rect = card.getBoundingClientRect(); const px = (e.clientX - rect.left) / rect.width - 0.5; const py = (e.clientY - rect.top) / rect.height - 0.5; card.style.transform = `perspective(700px) rotateX(${py * -10}deg) rotateY(${px * 12}deg) translateY(-6px)`; }); card.addEventListener("pointerleave", () => { card.style.transform = ""; }); }); } /* --------------------------------------------------------------------- FAQ ACCORDION --------------------------------------------------------------------- */ document.querySelectorAll(".faq__item").forEach((item) => { const btn = item.querySelector(".faq__q"); const answer = item.querySelector(".faq__a"); btn.addEventListener("click", () => { const isOpen = item.classList.contains("is-open"); document.querySelectorAll(".faq__item.is-open").forEach((openItem) => { if (openItem !== item) { openItem.classList.remove("is-open"); openItem.querySelector(".faq__a").style.maxHeight = null; } }); item.classList.toggle("is-open", !isOpen); answer.style.maxHeight = !isOpen ? answer.scrollHeight + "px" : null; }); }); })();

momss.in

Author: tinkubharu@gmail.com