프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 패럴랙스(Parallax) 스크롤 효과를 넣어 줘. 패럴랙스 스크롤링(parallax scrolling), 패럴랙스 레이어(parallax layers)라고도 불러.
페이지를 스크롤할 때 배경 레이어가 콘텐츠보다 느리게 움직이고, 멀리 있는 레이어일수록 덜 움직여서 은은한 깊이감을 주게 해 줘.
지연 없이 스크롤 위치에 맞춰 움직이고, 텍스트는 보통 속도 레이어에 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 효과를 꺼 줘.비슷한 모션
A
안에서 스크롤해 보세요
Scroll-Linked Animation (스크롤 연동 애니메이션)
다른 이름 Scroll-Driven Animation, Scroll Scrub, Scroll Timeline Animation, Scrub, Scroll Scrubbing, Scroll Progress Timeline, scroll() timeline, View Progress Timeline, view() timeline, Element Visibility Animation
애니메이션 진행이 스크롤 위치에 바로 묶여 있어, 앞으로 스크롤하면 재생되고 뒤로 스크롤하면 되감깁니다.
쓰는 곳
스토리텔링 페이지, 진행 효과
[적용할 곳]에 스크롤 연동 애니메이션(Scroll-Linked Animation)을 넣어 줘. 스크롤 드리븐 애니메이션(scroll-driven animation), 스크롤 스크럽(scroll scrub)이라고도 불러.
애니메이션이 스크롤 위치에 정확히 맞춰 움직여서, 아래로 내리면 앞으로 재생되고 위로 올리면 그 자리에서 되감기게 해 줘. 시간 기반 이징은 따로 넣지 마.
애니메이션 전체를 분명한 스크롤 구간에 맞추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 자연스러운 정지 상태를 보여 줘.A
안에서 스크롤해 보세요
Zoom on Scroll (스크롤 줌)
다른 이름 Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom
스크롤에 따라 요소나 장면이 커지거나 작아집니다.
쓰는 곳
히어로 인트로, 이미지 확대
[적용할 곳]에 스크롤 줌(Zoom on Scroll) 효과를 넣어 줘. scroll zoom, 스케일 온 스크롤(scale on scroll)이라고도 불러.
섹션이 화면에 머무는 동안 요소가 작은 카드에서 스크롤에 맞춰 부드럽게 커져 화면 전체를 채우고, 위로 올리면 다시 작아지게 해 줘.
주변 레이아웃을 밀어내지 않게 크기를 바꾸고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 줌 없이 최종 크기로 보여 줘.Ken Burns Effect (켄 번스 효과)
다른 이름 Slow pan and zoom, Ken Burns, Kenburns
정지 이미지가 틀 안에서 천천히 확대되며 움직입니다.
쓰는 곳
히어로 슬라이드쇼, 배경
[적용할 곳]에 켄 번스 효과(Ken Burns Effect)를 넣어 줘. 슬로 팬 앤 줌(slow pan and zoom)이라고도 불러.
이미지마다 보이는 동안 아주 천천히 한 방향으로만 확대되며 흘러가다가, 다른 방향으로 움직이는 다음 이미지로 크로스페이드되게 해 줘. 차분하고 끊김 없이.
어느 순간에도 이미지가 틀 전체를 덮어 가장자리가 보이지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 이미지를 멈춰 둬.Scroll의 다른 모션
ABC
A
B
C
안에서 스크롤해 보세요
Pinning (피닝)
다른 이름 Pinned Section, Sticky Section, Scroll Pin
특정 스크롤 구간 동안 요소가 제자리에 고정되고, 그동안 다른 콘텐츠나 애니메이션이 진행됩니다.
쓰는 곳
스크롤 기반 스토리텔링, 기능 소개
[적용할 곳]에 피닝(Pinning) 스크롤 효과를 넣어 줘. 핀 고정 섹션(pinned section), 스티키 섹션(sticky section)이라고도 불러.
옆의 콘텐츠가 스크롤로 지나가는 동안 패널 하나는 제자리에 고정해 두고, 읽고 있는 단계에 맞춰 내용이 바뀌다가 섹션이 끝나면 고정이 풀리게 해 줘.
스크롤을 가로채기보다 네이티브 sticky 포지셔닝을 우선 쓰고, 작은 화면에서는 고정 패널 없이도 각 단계가 잘 읽히게 해 줘.안에서 스크롤해 보세요
Scroll Progress Indicator (스크롤 진행 표시줄)
다른 이름 Reading Progress Bar, Progress Bar
페이지나 글을 스크롤하는 만큼 막대나 링이 채워집니다.
쓰는 곳
아티클, 긴 페이지
[적용할 곳]에 스크롤 진행 표시줄(Scroll Progress Indicator)을 넣어 줘. 읽기 진행 바(reading progress bar)라고도 불러.
위쪽의 얇은 막대가 스크롤한 만큼 왼쪽에서 오른쪽으로 채워지고, 끝까지 내리면 전체 너비가 되게 해 줘.
이징 지연 없이 스크롤 위치에 바로 연결하고, 콘텐츠를 가리지 않게 해 줘.A
B
C
D
안에서 스크롤해 보세요
Scroll Snap (스크롤 스냅)
다른 이름 Scroll Snapping, Snap Scrolling
스크롤이 슬라이드나 섹션 같은 정해진 지점에 딱 맞춰 멈춥니다.
쓰는 곳
캐러셀, 전체 화면 섹션, 갤러리
[적용할 곳]에 스크롤 스냅(Scroll Snap)을 넣어 줘. 스크롤 스내핑(scroll snapping), 스냅 스크롤링(snap scrolling)이라고도 불러.
스크롤이 멈추면 어중간한 곳에 서지 않고 가장 가까운 섹션의 가장자리에 딱 맞춰 자리 잡게 해 줘.
휠·터치·키보드 스크롤이 모두 그대로 되도록 브라우저 기본 스냅을 쓰고, 화면보다 긴 콘텐츠도 끝까지 읽을 수 있게 해 줘.