스크롤이 곧 재생 시간이 됩니다
일반 배경 영상은 그냥 자동재생 루프입니다. 여기서는 스크롤 위치를 영상의 재생 시점과 1:1로 연결합니다. 내리면 꽃이 피고, 올리면 봉오리로 되감깁니다. 카메라가 고정된 원테이크 타임랩스라 어느 방향으로 스크롤해도 자연스럽게 이어집니다.
자동재생 · 사용자와 무관
스크롤 = 재생 · 몰입 인터랙션
직접 스크롤해 피워보세요
아래 프레임을 지나가며 스크롤하면 실제로 봉오리 → 만개까지 재생됩니다. (이 사이트에 임베드된 실제 영상)
- 봉오리
- 벌어짐
- 피어남
- 만개
개화 '순간'이 극적인 꽃을
장미
나선형으로 겹겹이 풀려 가장 드라마틱. 고급스러운 무드.
양귀비
봉오리에서 구겨진 꽃잎이 툭 터지듯 펴져 가장 영화적.
부케(예시)
피오니·튤립·장미·라일락을 함께. 다크 배경과 잘 맞음.
튤립
깔끔·미니멀. 단, 개화가 얌전해 배경용으로 은은함.
스크럽용 영상 프롬프트
핵심 제약 4가지 — 카메라 고정 · 줌 없음 · 컷 없음 · 봉오리에서 천천히 개화. 스크롤로 되감아야 하므로 카메라 이동이나 컷이 있으면 어색해집니다.
Baroque still-life bouquet of peonies, tulips, roses and lilacs, starting from
elegant closed flower buds and slowly blooming open together in a graceful
time-lapse, soft pink, cream and mauve tones, pure deep black background,
dramatic soft painterly light, static locked camera, no camera movement, no
zoom, no cuts, petals unfurling slowly and beautifully, cinematic fine-art
still life, designed for smooth mouse-scroll video scrubbing on a dark website,
10 seconds, 16:9, photorealistic painterly realism.Higgsfield로 생성
모델
Seedance 2.0 우선, 실패 시 Kling 3.0으로 대체. 둘 다 text-to-video 지원.
설정
길이 10초 · 비율 16:9 · 무음(sound off) — 스크럽엔 소리가 필요 없음.
해상도
웹 히어로는 720p로도 충분. 필요하면 이후 1080p/4K 업스케일.
길이 팁
10초면 스크럽 프레임이 넉넉. 5초는 다소 빠르게 지나감.
스크롤 → 재생 시점 연결
HTML · CSS · JS 세 조각이면 끝입니다. 그대로 복사해 /hero-bloom.mp4 경로만 바꾸세요.
<!-- 스크롤 거리를 만드는 래퍼(500vh) + 화면에 고정되는 sticky 영상 -->
<div class="scrolly">
<div class="sticky">
<video id="v" src="/hero-bloom.mp4" muted playsinline preload="auto"></video>
</div>
</div>.scrolly { height: 500vh; } /* 스크롤 거리 = 영상 길이 */
.sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.sticky video { width: 100%; height: 100%; object-fit: cover; }
/* ⚠️ 중요: body에 overflow-x: hidden 을 쓰면 sticky가 깨집니다.
대신 clip 을 쓰세요. (hidden은 스크롤 컨테이너를 만들어 sticky 고정이 풀림) */
body { overflow-x: clip; }const v = document.getElementById("v");
const wrap = document.querySelector(".scrolly");
let dur = 0, target = 0, cur = 0, ready = false, seeking = false, t0 = 0;
v.addEventListener("loadedmetadata", () => (dur = v.duration));
v.addEventListener("loadeddata", () => {
ready = true;
v.pause();
v.currentTime = 0.04; // 첫 프레임 강제 렌더
});
v.addEventListener("seeked", () => (seeking = false));
v.play().then(() => v.pause()).catch(() => {}); // 버퍼링 자극
function progress() {
const rect = wrap.getBoundingClientRect();
const scrollable = wrap.offsetHeight - window.innerHeight;
return scrollable <= 0 ? 0
: Math.min(Math.max(-rect.top, 0), scrollable) / scrollable;
}
function tick() {
if (ready && dur) {
target = progress() * (dur - 0.05); // 스크롤 → 목표 재생 시점
cur += (target - cur) * 0.15; // 부드럽게 보간
if (seeking && performance.now() - t0 > 400) seeking = false; // 멈춤 방지
if (!seeking && Math.abs(v.currentTime - cur) > 0.01) {
seeking = true; t0 = performance.now();
try { v.currentTime = cur; } catch { seeking = false; } // 한 번에 하나씩 seek
}
}
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);자주 막히는 지점 ①
영상이 스크롤 시 사라짐 → body의 overflow-x: hidden이 sticky를 깨는 것. clip으로 교체.
자주 막히는 지점 ②
첫 프레임에서 얼어붙음 → 매 프레임 seek가 밀림. seeked 이벤트로 한 번에 하나씩만 seek.
이렇게 4단계면 끝
꽃 고르기 → 프롬프트 → 영상 생성 → 스크럽 연결. AI 영상 하나로 브랜드 히어로가 살아 움직입니다. 여러분의 제품/서비스에도 같은 패턴을 그대로 적용해보세요.