프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 가로 스크롤 섹션(Horizontal Scroll Section)을 넣어 줘. horizontal scrolling, scroll-jacked horizontal gallery라고도 불러.
섹션이 화면 위에 닿으면 고정된 채로, 아래로 스크롤할 때 패널 줄이 옆으로 움직이고, 마지막 패널이 보이면 고정이 풀리게 해 줘.
옆 움직임은 스크롤 위치에 직접 연결해서 되돌려 스크롤하면 반대로 움직이게 하고, 작은 화면이거나 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 일반적인 스와이프 가능한 가로 줄로 보여 줘.비슷한 모션
클릭해 보세요
Carousel Slide (캐러셀 슬라이드)
다른 이름 Slider, Swipe carousel, Scroll-snap carousel
슬라이드가 보이는 영역을 가로로 지나가며 한 장씩 제자리에 딱 맞춰집니다.
쓰는 곳
히어로 배너, 상품 갤러리
[적용할 곳]에 캐러셀 슬라이드(Carousel Slide)를 넣어 줘. 슬라이더(slider), 스와이프 캐러셀(swipe carousel)이라고도 불러.
한 단계마다 줄이 옆으로 밀려 다음 슬라이드가 가운데에 딱 맞춰지게 해 줘. 부드럽게 감속하고, 양옆 가장자리에 이웃 슬라이드가 살짝 보이고, 위치 점도 함께 따라가게.
한 번에 한 장씩 넘기고, 버튼과 방향키뿐 아니라 터치 스와이프도 지원하고, 컨트롤에는 스크린 리더용 라벨을 달아 줘.안에서 스크롤해 보세요
Text Marquee on Scroll (스크롤 텍스트 마퀴)
다른 이름 Scroll Text Marquee, Text Scroll, Scroll Velocity Text, Scroll Based Velocity
페이지를 세로로 스크롤하면 큰 텍스트 줄이 가로로 미끄러집니다.
쓰는 곳
브랜드 문구, 히어로 섹션
[적용할 곳]에 스크롤 텍스트 마퀴(Text Marquee on Scroll)를 넣어 줘. scroll text marquee,스크롤 벨로시티 텍스트(scroll velocity text)라고도 불러.
페이지를 아래로 내리면 큰 텍스트 줄이 옆으로 미끄러지고, 줄마다 번갈아 반대 방향으로 움직이며, 위로 올리면 되돌아가게 해 줘.
움직임은 스크롤 위치에 연결하고, 긴 줄 때문에 가로 스크롤바가 생기지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.안에서 스크롤해 보세요
Scroll Snap (스크롤 스냅)
다른 이름 Scroll Snapping, Snap Scrolling
스크롤이 슬라이드나 섹션 같은 정해진 지점에 딱 맞춰 멈춥니다.
쓰는 곳
캐러셀, 전체 화면 섹션, 갤러리
[적용할 곳]에 스크롤 스냅(Scroll Snap)을 넣어 줘. 스크롤 스내핑(scroll snapping), 스냅 스크롤링(snap scrolling)이라고도 불러.
스크롤이 멈추면 어중간한 곳에 서지 않고 가장 가까운 섹션의 가장자리에 딱 맞춰 자리 잡게 해 줘.
휠·터치·키보드 스크롤이 모두 그대로 되도록 브라우저 기본 스냅을 쓰고, 화면보다 긴 콘텐츠도 끝까지 읽을 수 있게 해 줘.안에서 스크롤해 보세요
Pinning (피닝)
다른 이름 Pinned Section, Sticky Section, Scroll Pin
특정 스크롤 구간 동안 요소가 제자리에 고정되고, 그동안 다른 콘텐츠나 애니메이션이 진행됩니다.
쓰는 곳
스크롤 기반 스토리텔링, 기능 소개
[적용할 곳]에 피닝(Pinning) 스크롤 효과를 넣어 줘. 핀 고정 섹션(pinned section), 스티키 섹션(sticky section)이라고도 불러.
옆의 콘텐츠가 스크롤로 지나가는 동안 패널 하나는 제자리에 고정해 두고, 읽고 있는 단계에 맞춰 내용이 바뀌다가 섹션이 끝나면 고정이 풀리게 해 줘.
스크롤을 가로채기보다 네이티브 sticky 포지셔닝을 우선 쓰고, 작은 화면에서는 고정 패널 없이도 각 단계가 잘 읽히게 해 줘.Scroll의 다른 모션
안에서 스크롤해 보세요
Parallax (패럴랙스)
다른 이름 Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero
스크롤에 따라 레이어가 서로 다른 속도로 움직여 깊이감을 줍니다.
쓰는 곳
히어로 배경, 랜딩 페이지
[적용할 곳]에 패럴랙스(Parallax) 스크롤 효과를 넣어 줘. 패럴랙스 스크롤링(parallax scrolling), 패럴랙스 레이어(parallax layers)라고도 불러.
페이지를 스크롤할 때 배경 레이어가 콘텐츠보다 느리게 움직이고, 멀리 있는 레이어일수록 덜 움직여서 은은한 깊이감을 주게 해 줘.
지연 없이 스크롤 위치에 맞춰 움직이고, 텍스트는 보통 속도 레이어에 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 효과를 꺼 줘.안에서 스크롤해 보세요
Scroll Progress Indicator (스크롤 진행 표시줄)
다른 이름 Reading Progress Bar, Progress Bar
페이지나 글을 스크롤하는 만큼 막대나 링이 채워집니다.
쓰는 곳
아티클, 긴 페이지
[적용할 곳]에 스크롤 진행 표시줄(Scroll Progress Indicator)을 넣어 줘. 읽기 진행 바(reading progress bar)라고도 불러.
위쪽의 얇은 막대가 스크롤한 만큼 왼쪽에서 오른쪽으로 채워지고, 끝까지 내리면 전체 너비가 되게 해 줘.
이징 지연 없이 스크롤 위치에 바로 연결하고, 콘텐츠를 가리지 않게 해 줘.