4082 Studio

어떻게 만들어졌나

원본은 마르세유와 플로리아노폴리스에 사무소를 둔 소프트웨어 에이전시 사이트입니다.

홈 히어로는 500vh 동안 사진 속으로 들어가고, 렌즈의 주황이 화면 전체를 덮습니다. 사진 확대와 주황 덮개 두 값으로 만든 장면입니다.

헤더는 10px만 내려도 폭 1144px 줄에서 682px 알약으로 줄어듭니다. 600ms 곡선까지 원본 값을 옮겼습니다.

원본 지구본은 three.js WebGL입니다. 캔버스 2D 정사영 위경선으로 다시 그려 three 계열 312KB를 덜었습니다.

히어로 영상의 인물은 오렌지 렌즈 선글라스 사진으로 바꿨습니다. 주황은 흰 글자 대비 4.7:1이 되게 #d93500으로 진하게 했습니다.

주요 기능

• 500vh 히어로 확대 장면
• 헤더 알약 전환 · 전면 메뉴 패널
• 집중 분야 호버 미리보기 · 2D 지구본
• 블로그 필터 · 문의 폼 드롭다운

어디에 어떻게 쓸 수 있나

서비스가 6개 안팎이고 사례 수가 적은 개발 에이전시에 맞습니다. 사무소가 여러 시간대에 있으면 지구본이 주소 목록을 대신합니다.

확인할 점

문의 폼은 검증만 하고 전송하지 않습니다. 첫 장면을 채울 고해상도 사진 한 장이 필요합니다.