LAST-DESIGN · CAFE24 INTERACTION

RIPPLE
CURSOR

메인 이미지 위에서 커서를 움직이면 지나간 자리마다 물결이 번집니다.
물결이 퍼지는 곳은 이미지가 실제로 일그러지고, 마루에는 빛이 얹힙니다. 클릭하면 더 크게 튑니다.

실제 적용사례 보기  →

WHAT YOU GET

TECH

three.js · Pixi · GSAP 어느 것도 쓰지 않습니다.
WebGL 셰이더 한 장으로 처리하며, 스크립트 용량은 약 5KB입니다.

WHERE TO USE

메인 페이지 최상단 히어로 · 시즌 컬렉션 오프닝 배너 · 브랜드 스토리 표지 · 신제품 티저 · 이벤트 랜딩 페이지 상단 · 룩북 진입 화면

PRICE & DELIVERY

· 모든 금액은 VAT 포함입니다.
· 작업기간은 자료 전달 완료일 기준 영업일입니다.
· 이미지·문구는 고객사에서 제공해 주셔야 합니다. (맞춤 옵션은 리터칭 포함)
· WebGL 특성상 이미지는 쇼핑몰과 같은 도메인에 올라가 있어야 합니다. 외부 도메인 이미지는 사용할 수 없습니다.
· 세로 사진을 가로 히어로에 쓸 때 잘리는 기준선(인물 얼굴 위치)을 값으로 잡아 드립니다.

움직임은 글로 설명하기 어렵습니다. 실제 페이지에서 이미지 위에 커서를 올려 보세요.

NOTICE

· 카페24 스마트디자인 기준으로 제작하며, 스킨 구조에 따라 적용 위치가 조정될 수 있습니다.
· 이미지는 쇼핑몰과 같은 도메인에 업로드되어야 합니다. (WebGL 보안 정책)
· 아주 오래된 기기나 WebGL 이 꺼진 브라우저에서는 원본 이미지가 그대로 보입니다.
· PC·모바일 분리형 스킨은 양쪽 적용이 필요하며 옵션 협의 후 진행합니다.
· 결제 전 문의 주시면 적용 가능 여부를 먼저 확인해 드립니다.