스크롤 애니메이션 사이트 빌더

한 문장이면 스크롤이 곧 카메라인 사이트가 나옵니다. 장면으로 파고들고, 빠져나와, 다음 장면에 내려앉습니다. 컷은 없습니다.

Katagiri High — The Last Light. Horimiya 세계에서 이 페이지를 위해 만들었습니다. 화면 안에서 스크롤해 보세요. 장면 셋, 이음매 둘, 끊기지 않는 한 번의 비행입니다.

The Descent — 수정 다리가 심연을 따라 나선으로 내려가고, 장면 문구와 내비게이션이 보인다

The Hollow Star — 통로 끝으로 왕좌의 방이 보이고, 장면 제목은 The Hollow Center

Odyssey — 동굴을 가득 채운 키클롭스, 장면 제목은 The Cyclops

SENGOKU — 진영의 새벽 — 세 막 중 1막. 스크롤이 카메라를 깃발 사이로 떨어뜨려 천막 줄까지 데려갑니다. 화면에는 SCROLL TO DESCEND, 정말 그렇게 움직입니다. — **진영의 새벽** — 세 막 중 1막. 스크롤이 카메라를 깃발 사이로 떨어뜨려 천막 줄까지 데려갑니다. 화면에는 SCROLL TO DESCEND, 정말 그렇게 움직입니다.

SENGOKU — 만 개의 칼날 — 2막. 전장으로 컷하지 않고 같은 카메라가 붉은 다리를 건넙니다. 창과 북이 주위로 밀려옵니다. — **만 개의 칼날** — 2막. 전장으로 컷하지 않고 같은 카메라가 붉은 다리를 건넙니다. 창과 북이 주위로 밀려옵니다.

SENGOKU — 흰 성 — 3막. 비행은 천수각에서 끝나고 '다시 날아보기'를 건넵니다. 장면 셋, 이음매 둘, 페이드 없음. — **흰 성** — 3막. 비행은 천수각에서 끝나고 '다시 날아보기'를 건넵니다. 장면 셋, 이음매 둘, 페이드 없음.

Five Realms — 달빛 산문 — 다섯 경계 중 첫째. 다이브는 아치 밖에서 시작해 문을 그대로 통과합니다. 문은 카메라가 실제로 지나가는 장소입니다. — **달빛 산문** — 다섯 경계 중 첫째. 다이브는 아치 밖에서 시작해 문을 그대로 통과합니다. 문은 카메라가 실제로 지나가는 장소입니다.

Five Realms — 대나무 길 — 둘째. 연결 클립이 산문을 등 뒤에 남깁니다. 다음 정지 화면으로 녹여버리지 않고요. — **대나무 길** — 둘째. 연결 클립이 산문을 등 뒤에 남깁니다. 다음 정지 화면으로 녹여버리지 않고요.

Five Realms — 구름 바다 위 절벽 — 셋째. 카메라가 구름을 오르는 동안에도 문구와 데이터 줄은 읽힙니다. — **구름 바다 위 절벽** — 셋째. 카메라가 구름을 오르는 동안에도 문구와 데이터 줄은 읽힙니다.

Homer’s Odyssey — 이타카: 출항 — 아홉 장면 모두 마스터 이미지 한 장에서 나왔습니다. 항구도 배도 빛도 한 세계의 것입니다. — **이타카: 출항** — 아홉 장면 모두 마스터 이미지 한 장에서 나왔습니다. 항구도 배도 빛도 한 세계의 것입니다.

Homer’s Odyssey — 트로이: 목마 — 두 번째 장면. 항구에서 이어지는 것은 생성된 클립이지 크로스페이드가 아닙니다. 불이 먼저 오고, 그다음에 장면이 바뀐 걸 알아차립니다. — **트로이: 목마** — 두 번째 장면. 항구에서 이어지는 것은 생성된 클립이지 크로스페이드가 아닙니다. 불이 먼저 오고, 그다음에 장면이 바뀐 걸 알아차립니다.

Homer’s Odyssey — 와인빛 바다 — 세 번째 장면. 내비 점은 장면을 건너뛰지만, 휠은 그 사이 모든 프레임을 긁습니다. — **와인빛 바다** — 세 번째 장면. 내비 점은 장면을 건너뛰지만, 휠은 그 사이 모든 프레임을 긁습니다.

LIVE PROOF

직접 열어 보기.

작품을 열고 여기서 사용해 보세요.

스크롤 사이트는 슬라이드가 아니라 비행입니다.

Studio가 세계를 만들고, 장면마다 16:9 정지 화면 한 장과 장면 사이를 옮겨주는 카메라 클립을 생성합니다. 나오는 페이지는 순수 HTML과 바닐라 자바스크립트입니다. 스크롤 위치가 영상 시간을 정하므로 휴대폰에서도 돌아가고, 프레임워크가 필요 없고, 짧은 영상 세 개 정도의 무게입니다.

컷이 아니라 이음매 — 연결 클립은 앞 클립의 마지막 프레임과 다음 클립의 첫 프레임에서 생성합니다. 그래서 접합부가 같은 프레임이고, 크로스페이드가 아닙니다.
장면 전체가 한 가지 질감 — 모든 장면 정지 화면은 마스터 한 장에서 파생됩니다. 1장면의 항구가 3장면에서도 같은 항구입니다.
영상이 아니라 페이지 — 열고, fork하고, 보낼 수 있는 공개 URL을 받습니다. 장면 제목, 눈썹 문구, 데이터 줄, 내비 라벨 모두 그냥 HTML이라 바로 고칠 수 있습니다.

만들기 전에 사람들이 묻는 것들.

스크롤 애니메이션 사이트가 뭔가요?

스크롤이 페이지를 내리는 데 그치지 않고 카메라를 움직이는 페이지입니다. 스크롤 위치가 영상의 한 프레임이 되어, 방문자는 영상을 보는 대신 자기 속도로 장면을 통과합니다.

GSAP나 Three.js가 필요한가요?

아니요. 엔진은 순수 자바스크립트로, 미리 렌더링한 클립을 스크롤 위치로 긁습니다. GSAP이나 Next.js 사이트에 얹을 수는 있지만 둘 다 필수는 아닙니다.

장면은 몇 개로 시작하는 게 좋나요?

셋입니다. 16:9에서 영상이 약 25MB라 빨리 뜨고, 이미 한 번의 여정으로 읽힙니다. 장면이 하나 늘면 클립 두 개, 약 9MB가 더 붙습니다.

휴대폰에서도 되나요?

됩니다. 작은 화면에는 640×360 판을 보내고, 긁기는 터치 스크롤을 따라갑니다. 무거운 데스크톱 클립은 아예 불러오지 않습니다.

한 번 만드는 데 무엇이 생성되나요?

정지 화면 3장, 다이브 3개, 연결 2개로 모두 8개입니다. 시작 전에 Studio에 클립 수와 모델을 물어보세요. 느리고 비용이 드는 쪽은 영상입니다.

나중에 문구를 바꿀 수 있나요?

됩니다. 장면 제목, 눈썹 문구, 데이터 줄, 내비 라벨은 공개 페이지의 평범한 HTML입니다. 한 프레임도 다시 렌더링하지 않고 글자만 고치면 됩니다.

생성이 실패하면 어떻게 되나요?

빌드가 멈추고 어느 클립이 실패했는지 알려줍니다. 빈자리를 임시 이미지로 채우지 않습니다. 가짜 장면은 이음매를 깨고, 그와 함께 착각도 깨기 때문입니다.

기존 IP나 내 그림을 써도 되나요?

됩니다. 장면은 참조 이미지에서 파생할 수 있고, 이 페이지의 세계들도 이미 있는 IP 세계 안에서 만들었습니다. 특정 설정에 맞춰야 한다면 캐릭터 시트나 키 비주얼을 가져오세요.

한 장소에 들를 곳 세 군데.

Studio가 장면과 다이브, 이음매를 생성해 스크롤하고 보낼 수 있는 페이지로 공개합니다. 아래 항구에서 시작해도 되고, 원하는 장소를 적어도 됩니다.

리월 야시장 사이트 만들기