詳解如何使用React構(gòu)建跑馬燈組件

更新時(shí)間：2024年04月12日 09:22:13 作者：曉風(fēng)曉浪

當(dāng)你想到跑馬燈時(shí),往往會(huì)想到游樂(lè)園里那些充滿活力的燈光和旋轉(zhuǎn)的顯示,帶回童年的美好回憶,本文將和大家一起探索如何在 React 中構(gòu)建一個(gè)引人入勝的跑馬燈組件,需要的朋友可以參考下

先決條件

掌握 HTML 和 CSS 的基礎(chǔ)知識(shí)
掌握 ES6 JavaScript 和 React 的基礎(chǔ)知識(shí)

1.理解跑馬燈組件

跑馬燈代表著一個(gè)連續(xù)的文本或視覺(jué)內(nèi)容（如圖片），它會(huì)自動(dòng)水平滾動(dòng)。

盡管官方的 HTML 跑馬燈元素已經(jīng)過(guò)時(shí)，并且強(qiáng)烈不建議使用，但滾動(dòng)、無(wú)盡元素來(lái)為網(wǎng)頁(yè)增添活力的概念仍然被廣泛使用，在許多現(xiàn)代網(wǎng)站上都可以找到。

這種效果是通過(guò) CSS 動(dòng)畫(huà)實(shí)現(xiàn)的，提供了更高效、流暢和輕量級(jí)的動(dòng)畫(huà)效果。

下面是來(lái)自 Webflow 的跑馬燈組件的視覺(jué)示例。

在這里插入圖片描述

Webflow 示例

2.跑馬燈的好處

它們有很多用處，比如：

吸引注意力：跑馬燈非常適合吸引用戶對(duì)網(wǎng)頁(yè)上特定內(nèi)容的注意。無(wú)論是特別優(yōu)惠、公告還是特色內(nèi)容，移動(dòng)的跑馬燈都能自然地吸引眼球。
視覺(jué)吸引力：為網(wǎng)站增加一點(diǎn)運(yùn)動(dòng)感可以增強(qiáng)其視覺(jué)吸引力。跑馬燈可以為頁(yè)面帶來(lái)生機(jī)，使其對(duì)用戶更加動(dòng)態(tài)和吸引。
突出重要信息：當(dāng)你想要強(qiáng)調(diào)重要信息，比如突發(fā)新聞、即將舉行的活動(dòng)或緊急消息時(shí)，跑馬燈是一種確保用戶不會(huì)錯(cuò)過(guò)的有效方式。
活動(dòng)推廣：它們特別適用于推廣活動(dòng)或有時(shí)間限制的活動(dòng)。它們的滾動(dòng)特性允許你以節(jié)省空間的方式顯示活動(dòng)細(xì)節(jié)、日期和重點(diǎn)。
滾動(dòng)式更新：為了顯示實(shí)時(shí)更新，比如股票價(jià)格、新聞標(biāo)題或社交媒體動(dòng)態(tài)，跑馬燈提供了一個(gè)持續(xù)不斷流動(dòng)信息的滾動(dòng)式格式，讓用戶始終保持了解。
交互式橫幅：它們可以作為交互式橫幅，允許用戶在它們滾動(dòng)時(shí)點(diǎn)擊特定項(xiàng)目。這可以是一種引導(dǎo)用戶進(jìn)入網(wǎng)站不同部分或頁(yè)面的創(chuàng)造性方式。
動(dòng)態(tài)產(chǎn)品展示：電子商務(wù)網(wǎng)站可以通過(guò)跑馬燈以視覺(jué)吸引人的方式展示新產(chǎn)品或特色商品，鼓勵(lì)用戶探索商品。
強(qiáng)調(diào)呼吁行動(dòng)：如果你有特定的呼吁行動(dòng)信息，使用跑馬燈可以突出顯示，并確保它們不會(huì)被忽視。
打破單調(diào)：在長(zhǎng)頁(yè)面或靜態(tài)內(nèi)容中，一個(gè)設(shè)計(jì)精良的跑馬燈可以打破單調(diào)，增加驚喜元素，使用戶體驗(yàn)更加有趣。
多功能性：它們非常靈活，可以根據(jù)不同的風(fēng)格和主題進(jìn)行定制，使其成為尋求創(chuàng)建獨(dú)特而令人難忘的用戶界面的網(wǎng)頁(yè)設(shè)計(jì)師的靈活工具。

3.計(jì)劃和設(shè)計(jì)跑馬燈組件

在開(kāi)始編碼之前，重要的是要計(jì)劃和設(shè)計(jì)你的組件，并考慮諸如：

定義內(nèi)容：清楚地概述你想在組件中顯示的內(nèi)容。這可以包括文本、圖片或二者的組合。
滾動(dòng)速度：確定要使用的期望滾動(dòng)速度。考慮可讀性和視覺(jué)吸引力的最佳速度。
視覺(jué)設(shè)計(jì)：草圖或想象你想要的外觀。決定顏色、字體和任何其他樣式，以與你的整體設(shè)計(jì)方案保持一致。
滾動(dòng)結(jié)束時(shí)的行為：考慮它到達(dá)滾動(dòng)位置末端時(shí)的行為。決定它是否應(yīng)該持續(xù)循環(huán)、來(lái)回反彈，或者有一個(gè)特定的結(jié)束狀態(tài)。
用戶交互：如果適用，計(jì)劃任何用戶交互。這可能包括懸停暫停或允許用戶點(diǎn)擊跑馬燈內(nèi)的項(xiàng)目。
響應(yīng)式設(shè)計(jì)：確保你的組件被設(shè)計(jì)為響應(yīng)式，能夠在不同的屏幕尺寸和設(shè)備上無(wú)縫適應(yīng)。
測(cè)試考慮：預(yù)期測(cè)試階段可能出現(xiàn)的挑戰(zhàn)或調(diào)整。計(jì)劃它在各種瀏覽器和設(shè)備上的行為方式。
可訪問(wèn)性：牢記可訪問(wèn)性，確保具有不同殘障的用戶仍然能夠訪問(wèn)和理解其中的內(nèi)容。

4.如何實(shí)現(xiàn)跑馬燈組件

要實(shí)現(xiàn)該組件，首先使用 Vite 創(chuàng)建一個(gè) React 環(huán)境。

npm create vite@latest

之后，進(jìn)入你的項(xiàng)目目錄，安裝必要的包并啟動(dòng)開(kāi)發(fā)服務(wù)器。

在這里插入圖片描述

設(shè)置開(kāi)發(fā)服務(wù)器

接下來(lái)，創(chuàng)建 JSX 模擬組件的元素。

export default function App() {
  return (
    <div className="main__container">
      <h1>My Marquee</h1>
      <section>
        <h2>Default Behaviour</h2>

        <div className="marquee">
          <ul className="marquee__content">
            <div className="marquee__item">
              <img src={AndroidLogo} alt="" />
            </div>
            <div className="marquee__item">
              <img src={BehanceLogo} alt="" />
            </div>
            <div className="marquee__item">
              <img src={GoogleLogo} alt="" />
            </div>
            <div className="marquee__item">
              <img src={InstagramLogo} alt="" />
            </div>
            <div className="marquee__item">
              <img src={PaypalLogo} alt="" />
            </div>
            <div className="marquee__item">
              <img src={SpotifyLogo} alt="" />
            </div>
          </ul>

          <ul aria-hidden="true" className="marquee__content">
            <div className="marquee__item">
              <img src={AndroidLogo} alt="" />
            </div>
            <div className="marquee__item">
              <img src={BehanceLogo} alt="" />
            </div>
            <div className="marquee__item">
              <img src={GoogleLogo} alt="" />
            </div>
            <div className="marquee__item">
              <img src={InstagramLogo} alt="" />
            </div>
            <div className="marquee__item">
              <img src={PaypalLogo} alt="" />
            </div>
            <div className="marquee__item">
              <img src={SpotifyLogo} alt="" />
            </div>
          </ul>
        </div>
      </section>
    </div>
  );
}

這包括組件的標(biāo)題、組件的行為和要?jiǎng)赢?huà)的組件中的數(shù)據(jù)。

重要的是要在組件中復(fù)制數(shù)據(jù)，因?yàn)樗鼘⒂糜趯?shí)現(xiàn)重復(fù)效果。然而，我們初始時(shí)隱藏第二個(gè)列表，使用 aria-hidden='true' 屬性。

為了使其更具視覺(jué)吸引力，添加以下樣式。

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  padding: 2rem;
  width: 100%;
  min-height: 100vh;
  font-size: 1rem;
  line-height: 1.5;
}

* { box-sizing: border-box; }

h1 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  margin-block: 2rem 1rem;
  text-align: center;
}

h2 {
  font-size: 1.25rem;
  font-weight: 600;
}

section { margin-block: 3rem; }

.main__container {
  max-width: 1000px;
  margin-inline: auto;
  background: rgb(124, 145, 175);
  padding: 3rem;
}

/* 跑馬燈樣式 */
.marquee {
  --gap: 1rem;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  border: 2px dashed lightgray;
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
}

.marquee__content img {
  max-width: 2rem;
  width: 100%;
  object-fit: contain;
}

.marquee__content > * {
  flex: 0 0 auto;
  color: white;
  background: #e8daef;
  margin: 2px;
  padding: 1rem 2rem;
  border-radius: 0.25rem;
  text-align: center;
}

.marquee__item {
  display: flex;
  justify-content: center;
  align-items: center;
}

ul { padding-left: 0; }

此時(shí)，你的組件應(yīng)該是這樣的；

在這里插入圖片描述

應(yīng)用樣式后的用戶界面

要為該組件添加動(dòng)畫(huà)，首先定義自定義 CSS 關(guān)鍵幀。

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--gap))); }
}

注意：所使用的間距是跑馬燈項(xiàng)目之間的相同間距。

然后，將這些關(guān)鍵幀分配給一個(gè)類(lèi)。

/* 啟用動(dòng)畫(huà) */
.enable-animation .marquee__content {
  animation: scroll 10s linear infinite;
}

最后，將該類(lèi)添加到你的 section 元素中。

<section className="enable-animation">

有了這些，你的組件應(yīng)該已經(jīng)開(kāi)始動(dòng)畫(huà)了。

在這里插入圖片描述

動(dòng)畫(huà)跑馬燈

5.如何增強(qiáng)跑馬燈組件

該組件超出了常規(guī)的無(wú)限動(dòng)畫(huà)（如上所示），通常具有一些額外的功能，例如：

懸停暫停：在使用跑馬燈顯示大量?jī)?nèi)容更加動(dòng)態(tài)時(shí)，動(dòng)畫(huà)的速度或與用戶相關(guān)的信息的位置可能會(huì)引起問(wèn)題，特別是對(duì)于閱讀速度較慢的用戶。

為了解決這個(gè)問(wèn)題，你可以實(shí)現(xiàn)一個(gè)懸停暫停功能，在用戶懸停時(shí)暫停動(dòng)畫(huà)。只需添加以下 CSS 代碼。

/* 懸停暫停 */
.marquee:hover .marquee__content {
  animation-play-state: paused;
}

有了這個(gè)，當(dāng)懸停時(shí)它會(huì)暫停。

在這里插入圖片描述

懸停時(shí)暫停的動(dòng)畫(huà)跑馬燈

雙擊反轉(zhuǎn)：在用戶已經(jīng)經(jīng)過(guò)重要信息并希望不必等待循環(huán)動(dòng)畫(huà)將其帶回時(shí)，提供一種實(shí)現(xiàn)該目的的手段非常重要。

通過(guò)雙擊組件，動(dòng)畫(huà)會(huì)以相反的方向播放，顯示用戶剛剛經(jīng)過(guò)的信息。這個(gè)功能不僅促進(jìn)了可訪問(wèn)性，還為你的網(wǎng)頁(yè)增添了一種靈活感，因?yàn)樗峁┝艘环N更快獲取信息的方式。

要實(shí)現(xiàn)這一點(diǎn)，首先創(chuàng)建一個(gè)反轉(zhuǎn)動(dòng)畫(huà)狀態(tài)。

const [reverseAnimation, setReverseAnimation] = useState(false);

然后創(chuàng)建一個(gè)函數(shù)來(lái)翻轉(zhuǎn)動(dòng)畫(huà)的狀態(tài)。

const handleDoubleClick = () => {
    setReverseAnimation((prev) => !prev);
  };

之后，創(chuàng)建 CSS 類(lèi)規(guī)則來(lái)反轉(zhuǎn)動(dòng)畫(huà)。

/* 反轉(zhuǎn)動(dòng)畫(huà) */
.marquee--reverse .marquee__content {
  animation-direction: reverse !important;
}

然后將處理函數(shù)附加到組件上。

<div className="marquee" onDoubleClick={handleDoubleClick}>

最后，根據(jù)需要在組件上動(dòng)態(tài)添加反轉(zhuǎn)類(lèi)，這會(huì)在雙擊時(shí)反轉(zhuǎn)動(dòng)畫(huà)。

 <div className={`marquee ${reverseAnimation && "marquee--reverse"}`} 
      onDoubleClick={handleDoubleClick}>

雙擊組件現(xiàn)在會(huì)產(chǎn)生如下效果；

在這里插入圖片描述

雙擊反轉(zhuǎn)的動(dòng)畫(huà)跑馬燈

空格鍵點(diǎn)擊暫停/播放：另一個(gè)可以添加以改善用戶體驗(yàn)的功能，特別是對(duì)于鍵盤(pán)用戶，是在按下空格鍵時(shí)暫?；虿シ潘?。這模仿了網(wǎng)頁(yè)上視頻的功能，并有助于提高用戶的可訪問(wèn)性。

要實(shí)現(xiàn)這一點(diǎn)，首先創(chuàng)建一個(gè)狀態(tài)來(lái)存儲(chǔ)動(dòng)畫(huà)的當(dāng)前暫停狀態(tài)。

const [isAnimationPaused, setIsAnimationPaused] = useState(false);

然后創(chuàng)建用于暫停狀態(tài)的 CSS 規(guī)則。

/* 暫停動(dòng)畫(huà) */
.marquee--paused .marquee__content {
  animation-play-state: paused !important;
}

之后，創(chuàng)建一個(gè)效果，每次按下空格鍵時(shí)更新 isAnimationPaused 狀態(tài)。

 useEffect(() => {
    const handleKeyPress = (event) => {
      if (event.code === "Space") {
        setIsAnimationPaused((prev) => !prev);
      }
    };
    document.addEventListener("keydown", handleKeyPress);

   // 組件卸載時(shí)的清理函數(shù)
    return () => {
      document.removeEventListener("keydown", handleKeyPress);
    };
  }, []);

這樣，狀態(tài)根據(jù)用戶的按鍵操作在 true 和 false 之間切換。
最后，動(dòng)態(tài)將暫停類(lèi)添加到你的組件中。

<div className={`marquee ${reverseAnimation && "marquee--reverse"} ${
       isAnimationPaused && "marquee--paused"}`} onDoubleClick={handleDoubleClick}>

有了這個(gè)，每次按下空格鍵時(shí)，你的組件都會(huì)暫停和播放。

在這里插入圖片描述

可以通過(guò)空格鍵暫停的動(dòng)畫(huà)跑馬燈

6.跑馬燈組件開(kāi)發(fā)的最佳實(shí)踐和技巧

構(gòu)建此組件時(shí)要考慮的一些最佳實(shí)踐包括：

延遲加載圖像：如果你的跑馬燈有很多高質(zhì)量的圖像，這些圖像可能很大，在構(gòu)建組件之前進(jìn)行優(yōu)化是必不可少的。
延遲加載可以減少整個(gè)頁(yè)面的加載時(shí)間。

要實(shí)現(xiàn)這一點(diǎn)，請(qǐng)?jiān)谀愕膱D像中添加 loading='lazy' 屬性。

<ul className="marquee__content">
    <div className=" marquee__item">
      <img src={AndroidLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={BehanceLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={GoogleLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={InstagramLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={PaypalLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={SpotifyLogo} alt="" loading="lazy" />
    </div>
  </ul>

  <ul aria-hidden="true" className="marquee__content">
    <div className=" marquee__item">
      <img src={AndroidLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={BehanceLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={GoogleLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={InstagramLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={PaypalLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={SpotifyLogo} alt="" loading="lazy" />
    </div>
</ul>

注意動(dòng)畫(huà)速度：在實(shí)現(xiàn)動(dòng)畫(huà)時(shí)，關(guān)鍵是要在速度方面取得謹(jǐn)慎的平衡。動(dòng)畫(huà)速度應(yīng)該具有視覺(jué)吸引力，吸引用戶的注意力，而不會(huì)犧牲可讀性或引起不適。
這涉及仔細(xì)考慮內(nèi)容在屏幕上滾動(dòng)的速度。
通過(guò)關(guān)注動(dòng)畫(huà)速度并找到正確的平衡，你可以增強(qiáng)整體用戶體驗(yàn)，使其成為網(wǎng)站上有效且愉快的元素。
考慮對(duì)動(dòng)態(tài)敏感的用戶：包容性設(shè)計(jì)意味著考慮不同用戶的需求和偏好，包括對(duì)動(dòng)態(tài)敏感的用戶。某些用戶可能由于前庭障礙等狀況或僅僅出于個(gè)人舒適原因而更喜歡較少的動(dòng)作。
為了支持這些用戶，你可以在組件中使用 prefers-reduced-motion 媒體查詢。

/* 當(dāng)設(shè)置為減少運(yùn)動(dòng)時(shí)暫停動(dòng)畫(huà) */
@media (prefers-reduced-motion: reduce) {
  .marquee__content {
    animation-play-state: paused !important;
  }
}

適當(dāng)?shù)奈臋n：提供清晰的文檔，說(shuō)明用戶如何有效地使用你的組件，以便他們不會(huì)在使用它時(shí)感到困難或錯(cuò)過(guò)它的所有功能?？紤]在組件周?chē)褂脴?biāo)簽或彈出窗口，傳達(dá)關(guān)于其使用的簡(jiǎn)短說(shuō)明。