프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 스크롤 트리거 애니메이션(Scroll-Triggered Animation)을 넣어 줘. 스크롤 리빌(reveal on scroll), 애니메이트 온 스크롤(animate on scroll)이라고도 불러.
각 항목이 화면에 들어올 때 한 번만 서서히 나타나며 위로 올라와 자리 잡게 해 줘. 스크롤 위치를 따라가지 말고 자체의 빠르고 부드러운 속도로 재생해 줘.
스크립트가 로드되지 않아도 콘텐츠가 보이게 하고, 사용자가 모션 줄이기(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)를 켜 두었으면 자연스러운 정지 상태를 보여 줘.Fade Up (페이드 업)
다른 이름 Fade In Up, Reveal on Scroll
요소가 살짝 떠오르며 서서히 나타나, 제자리에 자리 잡는 느낌을 줍니다.
쓰는 곳
스크롤로 등장하는 섹션 제목, 카드, 이미지
[적용할 곳]에 페이드 업(Fade Up) 등장 애니메이션을 넣어 줘. 페이드 인 업(fade-in-up), 스크롤 리빌(reveal on scroll)이라고도 불러.
요소가 처음 화면에 들어올 때 살짝 떠오르면서 서서히 나타나게 해 줘. 은은하고 빠르게, 튕기는 느낌 없이.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.Stagger (스태거)
다른 이름 Staggered Animation, Cascade
그룹 안의 항목이 짧은 간격을 두고 차례로 움직여, 한꺼번에 나타나는 대신 물결처럼 이어집니다.
쓰는 곳
리스트, 그리드, 내비게이션 메뉴, 검색 결과
[적용할 곳]에 스태거(Stagger) 애니메이션을 넣어 줘. 스태거드 애니메이션(staggered animation), 캐스케이드(cascade)라고도 불러.
항목들이 짧고 일정한 간격을 두고 하나씩 차례로 떠오르며 나타나게 해서, 한꺼번에가 아니라 빠른 물결처럼 보이게 해 줘.
항목이 많아도 전체가 짧게 끝나게 하고, 화면에 들어올 때 한 번만 재생하고, 모션 줄이기(prefers-reduced-motion)를 켠 사용자에게는 움직임 없이 보여 줘.ABCDEFGHIJKLMNOPQRSTUVWXYZ
안에서 스크롤해 보세요
Text Reveal (텍스트 리빌)
다른 이름 Scroll Text Reveal, Word-by-word Reveal
문단의 단어가 스크롤에 따라 흐린 상태에서 완전히 선명한 상태로 바뀝니다.
쓰는 곳
선언문이나 소개 문단
[적용할 곳]에 텍스트 리빌(Text Reveal) 효과를 넣어 줘. 스크롤 텍스트 리빌(scroll text reveal), 단어별 리빌(word-by-word reveal)이라고도 불러.
문단은 흐리게 시작하고, 사용자가 스크롤하면 단어가 하나씩 차례로 온전히 선명해지게, 스크롤 위치에 맞춰 연결해 줘.
다시 위로 스크롤하면 단어가 도로 흐려지게 하고, 흐린 정도와 상관없이 문단 전체를 스크린 리더가 읽을 수 있게 해 줘.Scroll의 다른 모션
안에서 스크롤해 보세요
Smooth Scroll (스무스 스크롤)
다른 이름 Smooth Scrolling, Inertia Scroll
스크롤과 앵커 이동이 뚝뚝 끊기지 않고 이징으로 부드럽게 미끄러집니다.
쓰는 곳
앵커 내비게이션, 고급스러운 느낌의 페이지
[적용할 곳]에 스무스 스크롤(Smooth Scroll)을 넣어 줘. 스무스 스크롤링(smooth scrolling), 관성 스크롤(inertia scroll)이라고도 불러.
스크롤과 앵커 이동이 뚝뚝 끊기지 않고 부드럽게 미끄러지다 멈추게 해 줘. 무겁게 늘어지지 않고 가볍고 반응이 빠른 느낌으로.
키보드 스크롤, 스크롤바, 페이지 내 찾기 같은 기본 동작은 그대로 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 부드러운 효과를 꺼 줘.A
B
C
D
안에서 스크롤해 보세요
Stacking Cards (스태킹 카드)
다른 이름 Sticky Stacking Cards, Card Stack Scroll
스크롤하면 카드가 위쪽에 붙은 채 차례로 겹쳐 쌓이고, 앞선 카드는 보통 조금씩 작아집니다.
쓰는 곳
기능 목록, 포트폴리오
[적용할 곳]에 스태킹 카드(Stacking Cards)를 넣어 줘. 스티키 스태킹 카드(sticky stacking cards), 카드 스택 스크롤(card stack scroll)이라고도 불러.
스크롤하면 각 카드가 위쪽 근처에 붙고 다음 카드가 그 위로 올라와 덮으면서, 아래 카드들은 살짝 작아져 가지런한 더미가 쌓이게 해 줘.
앞선 카드마다 가장자리가 얇게 보이게 남기고, 마지막 카드가 섹션이 끝나기 전에 제자리까지 올 수 있게 여유 공간을 줘.안에서 스크롤해 보세요
Sticky Header Shrink (스티키 헤더 축소)
다른 이름 Shrinking Header, Shrink on Scroll
아래로 스크롤하면 고정 헤더의 높이나 크기가 줄어듭니다.
쓰는 곳
내비게이션 바
[적용할 곳]에 스티키 헤더 축소(Sticky Header Shrink)를 넣어 줘. 슈링킹 헤더(shrinking header), 슈링크 온 스크롤(shrink on scroll)이라고도 불러.
헤더는 위쪽에 붙어 있다가, 조금 내려가면 로고가 작아진 얇은 바로 부드럽게 줄어들고, 맨 위로 돌아오면 다시 커지게 해 줘.
헤더 크기가 바뀌는 동안 아래 콘텐츠가 튀지 않게 해 줘.