Marquee

Marquee (마퀴)

로고·이미지·텍스트를 가로 또는 세로로 계속 스크롤해 표시하는 컴포넌트예요. 무한 루프·속도·대각선 등 다양한 애니메이션을 지원해요.

출처: 문서

본문

사용법 (Usage)

import { Marquee } from "@chakra-ui/react"

<Marquee.Root>
  <Marquee.Viewport>
    <Marquee.Content>
      <Marquee.Item />
    </Marquee.Content>
  </Marquee.Viewport>
</Marquee.Root>

예제 (Examples)

반전 (Reversed)

Marquee.Root 컴포넌트의 reverse prop을 사용해 마퀴 방향을 반대로 해요.

세로 애니메이션 (Vertical Animation)

Y축을 따라 콘텐츠를 애니메이션하려면 side prop을 사용해 bottom으로 설정해요.

속도 (Speed)

speed prop을 사용해 초당 픽셀 단위로 애니메이션 속도를 제어해요.

상호작용 시 일시정지 (Pause On Interaction)

pauseOnInteraction prop을 사용해 사용자가 마퀴를 호버하거나 포커스할 때 애니메이션을 일시정지해요.

스토어 (Store)

Marquee.RootProvider와 useMarquee 훅을 사용해 마퀴 인스턴스를 컴포넌트에 제공하고 애니메이션 상태를 프로그래밍 방식으로 제어해요.

유한 루프 (Finite Loops)

마퀴를 유한 번만 반복하려면 Marquee.Root에 loopCount prop을 설정해요. 또는 onLoopComplete와 onComplete 콜백을 사용해 완료된 루프 횟수나 애니메이션이 완전히 끝나는 시점을 추적해요.

<Marquee.Root
  loopCount={3}
  onLoopComplete={() => {
    /* handle loop completion */
  }}
  onComplete={() => {
    /* handle animation end */
  }}
>
  {/* Marquee.Item elements */}
</Marquee.Root>

가장자리 그라데이션 (Edge Gradient)

Marquee.Edge 컴포넌트를 렌더링해 가장자리 페이드를 적용해요.

여러 개 (Multiple)

교차되는 마퀴 컴포넌트를 렌더링하는 예시예요.

대각선 (Diagonal)

마퀴 컴포넌트를 사용해 콘텐츠를 대각선으로 애니메이션하는 예시예요.

뉴스 티커 (News Ticker)

마퀴 컴포넌트로 뉴스 티커를 구현하는 예시예요.

이미지 갤러리 (Image Gallery)

교차 방향으로 스크롤되는 여러 세로 마퀴가 있는 3D 원근 이미지 갤러리 예시예요.

사용 후기 (Testimonials)

마퀴 컴포넌트로 사용 후기를 표시할 수 있어요.

RTL 지원 (RTL Support)

마퀴 컴포넌트는 RTL(오른쪽에서 왼쪽) 레이아웃을 지원해요. 컴포넌트를 LocaleProvider로 감싸 RTL 모드를 활성화해요.

가이드 (Guide)

CSS 변수 (CSS Variables)

마퀴 컴포넌트는 동작과 모양을 커스터마이즈할 수 있는 CSS 변수를 노출해요.

<Marquee.Root
  css={{
    "--marquee-duration": "30s",
    "--marquee-delay": "0s",
    "--marquee-loop-count": "infinite",
    "--marquee-edge-color": "colors.bg",
    "--marquee-edge-size": "20%",
  }}
>
  {/* ... */}
</Marquee.Root>

Props

Marquee 컴포넌트의 Root 부분에 대한 prop 테이블 (대화형 문서 참고).

더 알아보기 (Learn more)

• Chakra UI Marquee 공식 문서
• Ark UI Marquee