LAST-DESIGN · CAFE24 INTERACTION

DETAIL
HOTSPOT

상품컷은 고정된 채, 스크롤에 따라 설명이 짚는 부위로 이미지가 확대·이동합니다.
디테일 컷을 따로 찍지 않아도 사진 한 장으로 다섯 곳을 설명할 수 있습니다.

실제 적용사례 보기  →

WHAT YOU GET

TECH

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

WHERE TO USE

상품 상세페이지 소재·디테일 설명 구간 · 가방·신발·모자 등 부자재가 많은 품목 · 가구·가전 기능 설명 · 화장품 성분·용기 설명 · 브랜드 스토리 페이지의 제작 공정 소개

PRICE & DELIVERY

· 모든 금액은 VAT 포함입니다.
· 작업기간은 자료 전달 완료일 기준 영업일입니다.
· 이미지·문구는 고객사에서 제공해 주셔야 합니다. (맞춤 옵션은 리터칭 포함)
· 확대해서 쓰는 블록이라 원본 이미지는 가로 1,200px 이상을 권장합니다.

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

NOTICE

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