프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 스크롤 줌(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)를 켜 두었으면 이미지를 멈춰 둬.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)를 켜 두었으면 자연스러운 정지 상태를 보여 줘.마우스를 올려 보세요
Hover Zoom (호버 줌)
다른 이름 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
포인터를 올리면 이미지가 틀 안에서 커지고, 때로는 포인터를 따라 이동합니다.
쓰는 곳
제품 카드, 썸네일
[적용할 곳]에 호버 줌(Hover Zoom) 효과를 넣어 줘. 이미지 줌 온 호버(image zoom on hover), 줌 팬(zoom-pan)이라고도 불러.
포인터가 이미지 위에 있는 동안 틀 크기는 그대로 두고 이미지가 틀 안에서 느리고 부드럽게 커지고, 벗어나면 부드럽게 돌아오게 해 줘.
이미지는 틀에 맞춰 잘라 레이아웃 밖으로 넘치지 않게 하고, 키보드 포커스에도 같은 줌을 보여 줘.A
B
C
D
안에서 스크롤해 보세요
Parallax (패럴랙스)
다른 이름 Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero
스크롤에 따라 레이어가 서로 다른 속도로 움직여 깊이감을 줍니다.
쓰는 곳
히어로 배경, 랜딩 페이지
[적용할 곳]에 패럴랙스(Parallax) 스크롤 효과를 넣어 줘. 패럴랙스 스크롤링(parallax scrolling), 패럴랙스 레이어(parallax layers)라고도 불러.
페이지를 스크롤할 때 배경 레이어가 콘텐츠보다 느리게 움직이고, 멀리 있는 레이어일수록 덜 움직여서 은은한 깊이감을 주게 해 줘.
지연 없이 스크롤 위치에 맞춰 움직이고, 텍스트는 보통 속도 레이어에 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 효과를 꺼 줘.Scroll의 다른 모션
안에서 스크롤해 보세요
Hide on Scroll Header (스크롤 숨김 헤더)
다른 이름 Headroom, Auto-hide Navbar, Reveal on Scroll Up, Scroll Direction Detection, Scroll Direction Animation
아래로 스크롤하면 헤더가 숨고, 위로 스크롤하면 다시 나타납니다.
쓰는 곳
모바일과 긴 페이지의 내비게이션 바
[적용할 곳]에 스크롤 숨김 헤더(Hide on Scroll Header)를 넣어 줘. 헤드룸(headroom), 자동 숨김 내비바(auto-hide navbar)라고도 불러.
아래로 스크롤하면 헤더가 위로 미끄러져 사라지고, 조금이라도 위로 스크롤하면 다시 내려오게 해 줘. 빠르고 부드럽게, 거리 말고 방향에 반응하게.
페이지 맨 위에서는 항상 보이게 하고, 자잘한 스크롤 흔들림은 무시하고, 헤더 안의 요소에 키보드 포커스가 있는 동안에는 계속 보이게 해 줘.A
B
C
D
E
안에서 스크롤해 보세요
Horizontal Scroll Section (가로 스크롤 섹션)
다른 이름 Horizontal Scrolling, Scroll-jacked Horizontal Gallery
세로 스크롤에 맞춰 고정된 패널 줄이 옆으로 움직입니다.
쓰는 곳
갤러리, 포트폴리오, 타임라인
[적용할 곳]에 가로 스크롤 섹션(Horizontal Scroll Section)을 넣어 줘. horizontal scrolling, scroll-jacked horizontal gallery라고도 불러.
섹션이 화면 위에 닿으면 고정된 채로, 아래로 스크롤할 때 패널 줄이 옆으로 움직이고, 마지막 패널이 보이면 고정이 풀리게 해 줘.
옆 움직임은 스크롤 위치에 직접 연결해서 되돌려 스크롤하면 반대로 움직이게 하고, 작은 화면이거나 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 일반적인 스와이프 가능한 가로 줄로 보여 줘.