세로 스크롤 → 가로 이동 핀 갤러리

제작 과정

한 줄 요약

긴 섹션 안에 sticky 뷰포트를 핀 고정하고, 섹션이 지나는 진행도(0~1)로 카드 트랙의 translateX를 계산해 세로 스크롤을 가로 흐름으로 바꿉니다.

이럴 때 필요해요

카드를 죽 늘어놓되 세로로 쌓기는 지루하고 가로 스크롤은 넘기기 어려울 때 포트폴리오/사례, 제품 기능 스토리 등.

어떻게 동작하나

키 큰 섹션 안에 sticky top-0 뷰포트를 둔다.
섹션-뷰포트 rect로 진행도(0~1)를 RAF로 계산한다.
진행도에 -(트랙폭-뷰포트폭)을 곱해 translateX를 정한다.
중앙 진입 시 스케일밝기 시차를 준다.

놓치기 쉬운 것

iframe내부 스크롤러에선 window가 아니라 해당 스크롤러 기준으로 측정한다.
translateX 최대치는 로드 후 scrollWidth가 확정되니 측정 타이밍을 보정한다.
prefers-reduced-motion이면 일반 가로 스크롤로 폴백한다.

이런 곳에 써요

포트폴리오/사례 갤러리
랜딩의 단계별 스토리 섹션

import type { Metadata } from "next"; import { HorizontalScrollCardsDemo } from "./-components/HorizontalScrollCardsDemo"; export const metadata: Metadata = { title: "세로 스크롤로 가로 이동하는 카드 갤러리 (데모)", description: "세로 스크롤 진행도를 가로 이동(translateX)으로 변환해 카드가 옆으로 흐르는 핀 고정 갤러리. 진행 바와 중앙 진입 시 스케일·시차 효과 포함.", robots: { index: false, follow: false }, }; export default function Page() { return <HorizontalScrollCardsDemo />; }