프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 스크롤 텍스트 마퀴(Text Marquee on Scroll)를 넣어 줘. scroll text marquee,스크롤 벨로시티 텍스트(scroll velocity text)라고도 불러.
페이지를 아래로 내리면 큰 텍스트 줄이 옆으로 미끄러지고, 줄마다 번갈아 반대 방향으로 움직이며, 위로 올리면 되돌아가게 해 줘.
움직임은 스크롤 위치에 연결하고, 긴 줄 때문에 가로 스크롤바가 생기지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.비슷한 모션
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
Marquee (마퀴)
다른 이름 Ticker, Infinite Scroll Text
콘텐츠 한 줄이 끊김 없이 옆으로 계속 흘러갑니다.
쓰는 곳
로고 월, 공지 띠, 키워드 배너, 뉴스 티커
[적용할 곳]에 마퀴(Marquee)를 넣어 줘. 가로로 끝없이 흐르는 띠로, 티커(ticker)라고도 불러.
내용이 오른쪽에서 왼쪽으로 느리고 일정한 속도로 흐르고, 이음매가 튀지 않게 끊김 없이 반복되게 해 줘.
마우스를 올리면 멈추고, 모션 줄이기(prefers-reduced-motion)를 켠 사용자에게는 움직이지 않게 해 줘.안에서 스크롤해 보세요
Horizontal Scroll Section (가로 스크롤 섹션)
다른 이름 Horizontal Scrolling, Scroll-jacked Horizontal Gallery
세로 스크롤에 맞춰 고정된 패널 줄이 옆으로 움직입니다.
쓰는 곳
갤러리, 포트폴리오, 타임라인
[적용할 곳]에 가로 스크롤 섹션(Horizontal Scroll Section)을 넣어 줘. horizontal scrolling, scroll-jacked horizontal gallery라고도 불러.
섹션이 화면 위에 닿으면 고정된 채로, 아래로 스크롤할 때 패널 줄이 옆으로 움직이고, 마지막 패널이 보이면 고정이 풀리게 해 줘.
옆 움직임은 스크롤 위치에 직접 연결해서 되돌려 스크롤하면 반대로 움직이게 하고, 작은 화면이거나 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 일반적인 스와이프 가능한 가로 줄로 보여 줘.안에서 스크롤해 보세요
Text Repetition (텍스트 반복)
다른 이름 Repeated Text Scroll
단어가 여러 겹의 복사본으로 쌓이고, 스크롤에 따라 어긋나며 움직입니다.
쓰는 곳
포트폴리오 제목
[적용할 곳]에 텍스트 반복(Text Repetition) 효과를 넣어 줘. 반복 텍스트 스크롤(repeated text scroll)이라고도 불러.
단어를 더 흐린 외곽선 복사본 여러 겹으로 복제해서, 스크롤하면 단어 뒤에서 펼쳐지고 위로 스크롤하면 다시 겹쳐지게 해 줘.
펼쳐지는 정도는 스크롤 위치에 바로 연결하고, 추가 복사본은 스크린 리더에서 숨겨 단어가 한 번만 읽히게 해 줘.안에서 스크롤해 보세요
Sliced Text (슬라이스드 텍스트)
다른 이름 On-Scroll Sliced Text
제목이 가로 조각으로 잘려, 페이지를 스크롤하면 조각끼리 서로 엇갈려 옆으로 밀립니다.
쓰는 곳
에디토리얼 히어로
[적용할 곳]에 슬라이스드 텍스트(Sliced Text) 효과를 넣어 줘. 온스크롤 슬라이스드 텍스트(on-scroll sliced text)라고도 불러.
큰 제목을 가로 조각으로 잘라, 처음에는 온전한 단어로 맞춰져 있다가 스크롤하면 조각끼리 서로 엇갈려 옆으로 밀리게 해 줘.
밀림을 스크롤 위치에 바로 연동해서 되돌리면 반대로 움직이게 하고, 스크린 리더에는 제목을 하나의 읽을 수 있는 텍스트로 유지해 줘.Scroll의 다른 모션
안에서 스크롤해 보세요
Zoom on Scroll (스크롤 줌)
다른 이름 Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom
스크롤에 따라 요소나 장면이 커지거나 작아집니다.
쓰는 곳
히어로 인트로, 이미지 확대
[적용할 곳]에 스크롤 줌(Zoom on Scroll) 효과를 넣어 줘. scroll zoom, 스케일 온 스크롤(scale on scroll)이라고도 불러.
섹션이 화면에 머무는 동안 요소가 작은 카드에서 스크롤에 맞춰 부드럽게 커져 화면 전체를 채우고, 위로 올리면 다시 작아지게 해 줘.
주변 레이아웃을 밀어내지 않게 크기를 바꾸고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 줌 없이 최종 크기로 보여 줘.안에서 스크롤해 보세요
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)라고도 불러.
아래로 스크롤하면 헤더가 위로 미끄러져 사라지고, 조금이라도 위로 스크롤하면 다시 내려오게 해 줘. 빠르고 부드럽게, 거리 말고 방향에 반응하게.
페이지 맨 위에서는 항상 보이게 하고, 자잘한 스크롤 흔들림은 무시하고, 헤더 안의 요소에 키보드 포커스가 있는 동안에는 계속 보이게 해 줘.