parallax

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

@@ -10,7 +10,7 @@ import { glassSurface, glassSurfaceCard, glassSurfaceFlat } from "@/lib/styles/g
 import { motion } from "framer-motion";
 import { ArrowLeft, Clock, Cup, Heart, TruckTick } from "iconsax-react";
 import { useParams, useRouter } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useGetProfile } from "../../(Profile)/profile/hooks/userProfileData";
 import { useGetAbout } from "../about/hooks/useAboutData";
 import { useGetFood, useToggleFavorite } from "./hooks/useFoodData";
@@ -26,6 +26,8 @@ function FoodPage({}: Props) {
   const { items, addToCart, removeFromCart } = useCart();
   const [isFavorite, setIsFavorite] = useState<boolean>(false);
   const { mutate: toggleFavorite } = useToggleFavorite();
+  const pageRef = useRef<HTMLDivElement>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
 
   const foodId = food?.data?.id || (id as string);
   const quantity = useMemo(() => {
@@ -80,6 +82,33 @@ function FoodPage({}: Props) {
     }
   }, [food?.data?.isFavorite]);
 
+  useEffect(() => {
+    const scrollEl = pageRef.current?.closest("main");
+    const imageEl = imageRef.current;
+    if (!scrollEl || !imageEl) return;
+
+    const desktopQuery = window.matchMedia("(min-width: 1024px)");
+    const PARALLAX_FACTOR = 0.35;
+
+    const applyParallax = () => {
+      if (desktopQuery.matches) {
+        imageEl.style.transform = "";
+        return;
+      }
+      imageEl.style.transform = `translate3d(0, ${scrollEl.scrollTop * PARALLAX_FACTOR}px, 0) scale(1.12)`;
+    };
+
+    scrollEl.addEventListener("scroll", applyParallax, { passive: true });
+    desktopQuery.addEventListener("change", applyParallax);
+    applyParallax();
+
+    return () => {
+      scrollEl.removeEventListener("scroll", applyParallax);
+      desktopQuery.removeEventListener("change", applyParallax);
+      imageEl.style.transform = "";
+    };
+  }, [food?.data?.id]);
+
   if (isLoading) {
     return (
       <div className="flex items-center justify-center min-h-[400px]">
@@ -125,20 +154,26 @@ function FoodPage({}: Props) {
   };
 
   return (
-    <div className="not-lg:max-w-lg not-lg:place-self-center not-lg:w-full not-lg:mb-10 pt-6 not-lg:flex not-lg:flex-col lg:fixed lg:z-10 lg:top-20 xl:top-22 lg:bottom-24 lg:left-5 lg:right-4 xl:right-[285px] lg:grid lg:grid-cols-2 lg:min-h-0 lg:overflow-hidden lg:rounded-2xl">
+    <div
+      ref={pageRef}
+      className="not-lg:max-w-lg not-lg:place-self-center not-lg:w-full not-lg:mb-10 pt-6 not-lg:flex not-lg:flex-col lg:fixed lg:z-10 lg:top-20 xl:top-22 lg:bottom-24 lg:left-5 lg:right-4 xl:right-[285px] lg:grid lg:grid-cols-2 lg:min-h-0 lg:overflow-hidden lg:rounded-2xl"
+    >
       <div
-        className={glassSurface("relative w-full lg:h-full min-h-0 rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1 lg:bg-transparent! lg:border-0! lg:shadow-none! lg:[backdrop-filter:none]")}
+        className={glassSurface(
+          "relative w-full lg:h-full min-h-0 rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1 lg:bg-transparent! lg:border-0! lg:shadow-none! lg:[backdrop-filter:none] not-lg:sticky not-lg:top-0 not-lg:z-0 not-lg:h-[min(50vh,400px)] not-lg:min-h-[280px] not-lg:rounded-b-none",
+        )}
       >
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
-          className="lg:object-cover lg:h-full object-cover bg-[#F2F2F9] w-full"
+          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"
           src={foodImage}
           alt={foodName}
           onError={(event) => {
             event.currentTarget.src = "/assets/images/no-image.png";
           }}
         />
-        <div className="absolute top-4 left-0 pe-5.5 ps-7 w-full inline-flex justify-between items-center">
+        <div className="absolute top-4 left-0 z-10 pe-5.5 ps-7 w-full inline-flex justify-between items-center">
           <div className={glassSurfaceFlat("whitespace-nowrap rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 dark:text-disabled-text font-bold")}>{categoryName || "-"}</div>
           <button onClick={handleBackToMenu} className={glassSurfaceFlat("p-2 rounded-full")}>
             <ArrowLeft size={18} className="stroke-primary dark:stroke-foreground" />
@@ -147,7 +182,9 @@ function FoodPage({}: Props) {
       </div>
 
       <div
-        className={glassSurfaceCard("relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:h-full lg:min-h-0 w-full overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none lg:overflow-y-auto rounded-3xl")}
+        className={glassSurfaceCard(
+          "relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:h-full lg:min-h-0 w-full overflow-hidden not-lg:z-10 not-lg:-mt-12 not-lg:rounded-t-3xl not-lg:shadow-[0_-10px_30px_rgba(0,0,0,0.08)] lg:rounded-l-none lg:overflow-y-auto rounded-3xl",
+        )}
       >
         <div className="w-full inline-flex justify-between items-center shrink-0">
           <h5 className="text-base font-bold">{foodName}</h5>