zoom with scrol

src/app/[name]/(Main)/[id]/page.tsx

@@ -88,23 +88,29 @@ function FoodPage({}: Props) {
     if (!scrollEl || !imageEl) return;
 
     const desktopQuery = window.matchMedia("(min-width: 1024px)");
-    const PARALLAX_FACTOR = 0.35;
+    const MAX_SCALE = 1.18;
+    const MIN_SCALE = 1.0;
 
     const applyParallax = () => {
       if (desktopQuery.matches) {
         imageEl.style.transform = "";
         return;
       }
-      imageEl.style.transform = `translate3d(0, ${scrollEl.scrollTop * PARALLAX_FACTOR}px, 0) scale(1.12)`;
+      const scrollRange = imageEl.parentElement?.offsetHeight ?? 320;
+      const progress = Math.min(1, Math.max(0, scrollEl.scrollTop / scrollRange));
+      const scale = MIN_SCALE + (MAX_SCALE - MIN_SCALE) * progress;
+      imageEl.style.transform = `scale(${scale})`;
     };
 
     scrollEl.addEventListener("scroll", applyParallax, { passive: true });
     desktopQuery.addEventListener("change", applyParallax);
+    window.addEventListener("resize", applyParallax);
     applyParallax();
 
     return () => {
       scrollEl.removeEventListener("scroll", applyParallax);
       desktopQuery.removeEventListener("change", applyParallax);
+      window.removeEventListener("resize", applyParallax);
       imageEl.style.transform = "";
     };
   }, [food?.data?.id]);
@@ -166,7 +172,7 @@ function FoodPage({}: Props) {
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           ref={imageRef}
-          className="lg:object-cover lg:h-full object-cover bg-[#F2F2F9] w-full not-lg:absolute not-lg:inset-0 not-lg:h-[115%] not-lg:will-change-transform"
+          className="lg:object-cover lg:h-full object-cover object-top bg-[#F2F2F9] w-full not-lg:absolute not-lg:inset-0 not-lg:h-[115%] not-lg:origin-top not-lg:will-change-transform"
           src={foodImage}
           alt={foodName}
           onError={(event) => {