반응 빠른 윤곽

React Fast Marquee로 부드러운 마키 만들기

이 기사에서는 부드럽게 스크롤되는 선택 윤곽을 만들기 위한 간단하면서도 강력한 구성 요소인 React Fast Marquee를 소개합니다. Next.js를 사용해도 통합이 매우 쉽습니다.

설치

설치는 간단합니다.

<code class="language-bash">npm install react-fast-marquee --save</code>

구성요소 가져오기:

<code class="language-javascript">import Marquee from "react-fast-marquee";</code>

사용방법

<Marquee> 태그로 콘텐츠를 감싸기만 하면 됩니다. 이는 텍스트, 단일 React 구성 요소 또는 여러 구성 요소일 수 있습니다.

<code class="language-javascript"><Marquee>
  This is my marquee text.  It will scroll smoothly!
</Marquee></code>

React Fast Marquee는 className, autoFill, loop, gradient 등 다양한 맞춤형 소품을 제공합니다. 자세한 사용 지침은 해당 구성 요소의 설명서와 데모를 참조하세요.

예: 브랜딩 쇼케이스

React Fast Marquee를 사용하여 요리법 장비 웹사이트에서 브랜드 쇼케이스를 만든 방법은 다음과 같습니다.

<code class="language-javascript">const brands = [
    {
        id: 1,
        name: 'ecolab',
        logo: '/brands/ecolab.webp',
    },
    // ... more brands
    ];


const MarqueeBrands = () => {
    return (
        <Marquee>
            {brands.map(brand => (
                <img alt={brand.name} className="w-[100px] sm:w-[150px] md:w-[200px] h-[70px] sm:h-[75px] md:h-[100px] object-contain mx-4 md:mx-6" height={100} key={brand.name} quality={50} sizes="(max-width: 768px) 150px, 200px" src={brand.logo} width={200} />
            ))}
        </Marquee>
    )
}</code>

그 결과 시각적으로 매력적이고 부드럽게 스크롤되는 브랜드 디스플레이가 탄생했습니다.

위 내용은 반응 빠른 윤곽의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!