쇼핑몰 유지보수 - 가로 스크롤 레일

디자인 상세정보

LAST-DESIGN · CAFE24 INTERACTION

SCROLL
RAIL

스크롤을 내리면 화면이 고정되고, 그 안에서 이미지 레일이 옆으로 흐릅니다.
화면 한가운데 온 컷만 커지고 밝아지며, 제목이 아래에서 굴러 올라옵니다.

WHAT YOU GET

01스크롤 = 가로 이동
구간에 들어오면 화면이 고정되고, 스크롤한 만큼 레일이 옆으로 이동합니다. 이동 거리는 카드 수에서 자동으로 계산되므로 컷을 늘려도 설정이 어긋나지 않습니다.

02가운데 컷만 살아납니다
화면 중앙에 가까운 카드일수록 커지고 밝아지며, 멀어질수록 작아지고 어두워집니다. 나열이 아니라 "지금 이것"이 생겨 시선이 한 컷에 모입니다.

03세로 컷과 가로 컷을 섞습니다
카드마다 비율이 달라도 됩니다. 폭은 비율에서 자동으로 나오고, 첫 컷과 마지막 컷이 정확히 화면 가운데 서도록 여백을 계산합니다. 룩북 세로컷과 배너 가로컷을 한 줄에 태울 수 있습니다.

04제목·번호·진행바
가운데 온 카드의 제목이 아래에서 위로 굴러 올라오고, 번호(03/12)와 하단 진행바가 함께 따라옵니다. 지금 어디쯤인지 손님이 늘 알 수 있습니다.

05끝에서 뜨는 CTA
마지막 컷이 가운데 서면 옆 빈 자리에 문구와 버튼이 떠오릅니다. 컬렉션·상품·문의 어디로든 연결할 수 있습니다.

TECH

Tailwind · GSAP · Lenis 어느 것도 쓰지 않습니다.
position:sticky 와 transform, requestAnimationFrame 만 사용해 스크립트 용량은 약 4KB입니다.

페이지 스크롤을 뺏지 않습니다
가상 스크롤을 쓰지 않습니다. 한 섹션 안에서만 동작하므로 위아래 섹션·헤더·푸터가 그대로 공존하고, 뒤로가기와 앵커 이동, 브라우저 검색도 정상입니다.

드래그해도 어긋나지 않습니다
드래그는 가로 위치를 직접 건드리지 않고 페이지를 대신 굴립니다. 위치의 출처가 스크롤 하나뿐이라 되감아도 어긋나지 않습니다. 터치 기기에서는 세로 스크롤을 방해하지 않도록 마우스에서만 켜집니다.

카드가 늘어도 무겁지 않습니다
화면 밖 카드는 프레임마다 계산을 건너뜁니다. 블록이 화면에서 벗어나면 연산 자체를 멈춰 배터리와 프레임을 아낍니다.

안전한 폴백
JS 미실행·모션 최소화 설정에서는 스냅이 걸린 평범한 가로 슬라이드로 바뀝니다. 이미지와 문구는 그대로 남아 검색에도 잡힙니다.

WHERE TO USE

메인 히어로 아래 컬렉션 구간 · 시즌 룩북 · 브랜드 스토리 페이지 · 포트폴리오 · 베스트 상품 소개 · 매장 소개

PRICE & DELIVERY

레일 1구간
지정 영역 1곳 · 카드 최대 12장 · 단일 비율 · 기본 배치·문구5일154,000원

브랜드 맞춤 구성
카드 최대 30장 · 세로·가로 혼합 비율 설계 · 제목·번호·진행바 재설계 · 카드 클릭 링크8일264,000원

풀 커스텀 패키지
이미지 리터칭·크롭 설계 · 카피 작성 · 다중 구간 설치 · 상품 데이터 연동 협의12일418,000원

· 모든 금액은 VAT 포함입니다.
· 작업기간은 자료 전달 완료일 기준 영업일입니다.
· 이미지·문구는 고객사에서 제공해 주셔야 합니다. (맞춤 옵션은 리터칭 포함)

움직임은 글로 설명하기 어렵습니다. 실제 페이지에서 스크롤을 내려 보세요.

실제 적용사례 보기 →

NOTICE

· 카페24 스마트디자인 기준으로 제작하며, 스킨 구조에 따라 적용 위치가 조정될 수 있습니다.
· 블록을 감싸는 부모 요소에 transform 이나 overflow:hidden 이 있으면 고정 동작이 제한될 수 있어, 설치 전에 확인해 드립니다.
· 카드가 많을수록 구간이 길어집니다. 스크롤 길이는 값으로 조절해 드립니다.
· PC·모바일 분리형 스킨은 양쪽 적용이 필요하며 옵션 협의 후 진행합니다.
· 결제 전 문의 주시면 적용 가능 여부를 먼저 확인해 드립니다.

상세정보 더보기