효과Effects / 반복·앰비언트Loop & Ambient / Nº 586

마키Marquee

Marquee

마키

다른 이름Also known as · Infinite ticker wrap · 무한 티커 순환 · Seamless carousel · Infinite conveyor · Infinite Marquee · 무한 흐름 띠 · Ticker Loop · Infinite Slider

586

도판Fig. 586. 마키 · Marquee · none

재생 속도Speed

콘텐츠가 화면 밖으로 나간 뒤 반대편에서 이어져 끊임없이 흐른다.Duplicated content flows continuously across the viewport.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

계속되는 목록과 활기를 전달한다.Suggests an ongoing stream and activity.

언제 쓰나Use whenUSE WHEN

브랜드 로고 목록을 흐르게 할 때
짧은 공지 문구를 연속 표시할 때

Use when presenting marquee in a waiting or ambient scene.
Use for a compact status indicator with a stable surrounding layout.

과용 주의AvoidAVOID

복제 경계의 간격이 달라 매 주기 화면이 튄다.
정보를 읽는 동안 반복 진폭을 키우지 않는다.

분류TagsTAGS

반복·앰비언트Loop & Ambient 피드백Feedback 분위기Mood 설명 영상Explainer video 웹 UIWeb UI 숏폼Short-form 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

960px 로고 스트립 두 개가 12초에 한 묶음씩 이동한다.

과용 · 나쁜 사례OVERUSE

복제 경계의 간격이 달라 매 주기 화면이 튄다.

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	12s	8.4~16.8s	유한 구간을 호스트 시간으로 반복
속도	80px/s	40~120px/s	스트립 길이로 지속 계산
항목 간격	24px	16~48px	복제 경계에도 동일 간격
복제 수	2	2~3	뷰포트를 채우는 길이 확보
이징	none	none	움직임의 가속과 감속

GSAP

const strip = document.querySelector('.strip');
const width = strip.getBoundingClientRect().width;
const clone = strip.cloneNode(true);
clone.setAttribute('aria-hidden', 'true');
strip.parentElement.append(clone);
tl.fromTo([strip, clone], {x:0}, {x:-width, duration:width/80, ease:'none'}, 0);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 마키을 적용해. 12초, 속도 80px/s; 항목 간격 24px; 복제 수 2, 이징 none로 구현해. paused 타임라인으로 seek 가능하게 하고 반복은 유한 구간의 지역 시간으로 계산해.

Apply Marquee to <target> in <file>. Use a 12s segment with none; implement these explicit settings: Speed: 80px/s, Item gap: 24px, Strip copies: 2. Use a paused, seekable timeline and repeat through local timeline time.

Codex

<파일>의 <대상> 레이어에 마키을 적용해. 12초, 속도 80px/s; 항목 간격 24px; 복제 수 2, none를 사용하고 0초, 6초, 12초 캡처로 시작값, 중간 변화, 완료 자세를 확인해. 동일 시점을 두 번 seek해 같은 결과인지 검증해.

Apply Marquee to the <target> layer in <file> with Speed: 80px/s, Item gap: 24px, Strip copies: 2, using the supplied core snippet and a 12s segment with none. Capture at 0s, 6s, and 12s to verify the initial pose, intermediate change, and final pose. Seek to the same timestamp twice and confirm identical output.