Varnelo

어떻게 만들어졌나

원본은 Webflow로 만든 여행사 템플릿입니다. 투어 4개, 여행 4개, 블로그 글 4개에 상세 페이지가 있습니다.

히어로 아래에는 사진 14장이 원통으로 서서 50초에 한 바퀴 돕니다. WebGL 없이 CSS 3D 변형과 키프레임 하나로 움직입니다.

원통의 카드 각도(25.71°)와 거리(480px), 회전 시간은 원본 수치를 그대로 옮겼습니다.

투어 필터를 누르면 남은 줄의 글 칸 위치를 보이는 순서로 다시 정합니다. 필터 상태를 하나씩 찍어 확인한 동작입니다.

원본 사진은 생성 이미지 계열이라 Unsplash 실사 74장으로 바꿨습니다. 후기의 얼굴 사진 자리는 머리글자 원으로 채웠습니다.

주요 기능

• CSS 3D 사진 링 히어로
• 투어 필터 탭 4종
• 후기 슬라이더 · FAQ 아코디언
• 영상·갤러리 라이트박스 · 예약 폼

어디에 어떻게 쓸 수 있나

투어 상품이 10개 안팎인 소규모 여행사에 맞습니다. 투어 목록, 상세 일정, 후기, 예약 폼이 이어집니다.

확인할 점

예약 폼은 검증만 하고 전송하지 않습니다. 투어마다 실제 촬영 사진이 2장 이상 있어야 합니다.