高速マーキーに反応する

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 を使用して美食機器の Web サイトにブランド ショーケースを作成した方法を次に示します。

<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 中国語 Web サイトの他の関連記事を参照してください。