danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

zoom with scrol
Build and Deploy Docker Images / build_and_deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
hamid zarghami
2026-06-29 15:28:02 +03:30
parent c1f2851e25
commit 1bfd61f496
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[name]/(Main)/[id]/page.tsx
+9 -3
View File
@@ -88,23 +88,29 @@ function FoodPage({}: Props) {
if (!scrollEl || !imageEl) return; if (!scrollEl || !imageEl) return;
const desktopQuery = window.matchMedia("(min-width: 1024px)"); const desktopQuery = window.matchMedia("(min-width: 1024px)");
const PARALLAX_FACTOR = 0.35; const MAX_SCALE = 1.18;
const MIN_SCALE = 1.0;
const applyParallax = () => { const applyParallax = () => {
if (desktopQuery.matches) { if (desktopQuery.matches) {
imageEl.style.transform = ""; imageEl.style.transform = "";
return; 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 }); scrollEl.addEventListener("scroll", applyParallax, { passive: true });
desktopQuery.addEventListener("change", applyParallax); desktopQuery.addEventListener("change", applyParallax);
window.addEventListener("resize", applyParallax);
applyParallax(); applyParallax();
return () => { return () => {
scrollEl.removeEventListener("scroll", applyParallax); scrollEl.removeEventListener("scroll", applyParallax);
desktopQuery.removeEventListener("change", applyParallax); desktopQuery.removeEventListener("change", applyParallax);
window.removeEventListener("resize", applyParallax);
imageEl.style.transform = ""; imageEl.style.transform = "";
}; };
}, [food?.data?.id]); }, [food?.data?.id]);
@@ -166,7 +172,7 @@ function FoodPage({}: Props) {
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img <img
ref={imageRef} 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} src={foodImage}
alt={foodName} alt={foodName}
onError={(event) => { onError={(event) => {