Marquee

Marquee

콘텐츠에 연속 스크롤 애니메이션을 만드는 컴포넌트예요. Marquee 컴포넌트는 자식 요소를 연속으로 스크롤하는 애니메이션을 만들어요. 로고, 추천사 또는 반복되는 콘텐츠를 표시할 때 흔히 사용돼요.

출처: 문서

본문

사용법 (Usage)

Marquee 컴포넌트는 자식 요소에 연속 스크롤 애니메이션을 만들어요. 로고, 추천사 또는 반복되는 콘텐츠를 표시할 때 흔히 사용돼요.

import { Marquee } from '@mantine/core';
import { MantineLogo } from '@mantinex/mantine-logo';

function Demo() {
  return (
    <Marquee>
      <MantineLogo />
      <MantineLogo />
      <MantineLogo />
    </Marquee>
  );
}

hover 시 일시 정지 (Pause on hover)

pauseOnHover prop을 설정하면 사용자가 컴포넌트 위에 마우스를 올렸을 때 애니메이션이 일시 정지돼요.

import { Marquee } from '@mantine/core';
import { MantineLogo } from '@mantinex/mantine-logo';

function Demo() {
  return <Marquee pauseOnHover>{/* ...content */}</Marquee>;
}

세로 방향 (Vertical orientation)

orientation="vertical"을 설정하면 콘텐츠를 세로로 스크롤할 수 있어요. 세로 스크롤을 사용하려면 컨테이너에 고정 높이를 설정해야 해요.

import { Marquee } from '@mantine/core';
import { MantineLogo } from '@mantinex/mantine-logo';

function Demo() {
  return (
    <Marquee orientation="vertical" h={200}>
      {/* ...content */}
    </Marquee>
  );
}

여러 줄 (Multiple rows)

방향이 서로 다른 여러 Marquee 컴포넌트를 조합하면 더 복잡한 레이아웃을 만들 수 있어요.

import { Marquee, Stack } from '@mantine/core';
import { MantineLogo } from '@mantinex/mantine-logo';

function Demo() {
  return (
    <Stack>
      <Marquee>{/* ...content */}</Marquee>
      <Marquee reverse>{/* ...content */}</Marquee>
    </Stack>
  );
}

가장자리 페이드 (Fade edges)

기본적으로 Marquee는 가장자리에 그라데이션 페이드를 표시해 부드러운 전환 효과를 만들어요. 다음 prop으로 페이드를 커스터마이즈할 수 있어요.

• fadeEdges – 페이드 그라데이션 활성/비활성 여부 (기본값: true)
• fadeEdgeColor – 페이드 그라데이션의 색상 (기본값: var(--mantine-color-body))
• fadeEdgeSize – 페이드 영역의 크기 (기본값: 5%)

import { Marquee, Stack, Text } from '@mantine/core';
import { MantineLogo } from '@mantinex/mantine-logo';

function Demo() {
  return (
    <Stack>
      <Text>Default fade (5%)</Text>
      <Marquee>{/* ... */}</Marquee>
      <Text>Larger fade (15%)</Text>
      <Marquee fadeEdgeSize="15%">{/* ... */}</Marquee>
      <Text>Custom fade color</Text>
      <Marquee fadeEdgeColor="var(--mantine-color-red-6)">{/* ... */}</Marquee>
      <Text>No fade</Text>
      <Marquee fadeEdges={false}>{/* ... */}</Marquee>
    </Stack>
  );
}

커스터마이즈 (Customization)

다음 prop으로 marquee 동작을 커스터마이즈할 수 있어요.

• reverse – 애니메이션 방향을 반대로 뒤집어요
• pauseOnHover – hover 시 애니메이션을 일시 정지해요
• orientation – horizontal(기본값) 또는 vertical 스크롤 방향
• repeat – 매끄러운 스크롤을 위해 자식 요소를 반복하는 횟수 (기본값: 4)
• duration – 밀리초 단위의 애니메이션 지속 시간 (기본값: 100000)
• gap – 반복되는 자식 요소 사이의 간격, theme.spacing의 키 또는 유효한 CSS 값

import { Marquee } from '@mantine/core';
import { MantineLogo } from '@mantinex/mantine-logo';

function Demo() {
  return <Marquee reverse gap="md">{/* ... */}</Marquee>;
}

더 알아보기 (Learn more)

• FocusTrap
• Paper