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

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

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

先決條件

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

1.理解跑馬燈組件

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

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

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

下面是來自 Webflow 的跑馬燈組件的視覺示例。

在這里插入圖片描述

Webflow 示例

2.跑馬燈的好處

它們有很多用處，比如：

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

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

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

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

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

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

npm create vite@latest

之后，進入你的項目目錄，安裝必要的包并啟動開發(fā)服務(wù)器。

在這里插入圖片描述

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

接下來，創(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)題、組件的行為和要動畫的組件中的數(shù)據(jù)。

重要的是要在組件中復(fù)制數(shù)據(jù)，因為它將用于實現(xiàn)重復(fù)效果。然而，我們初始時隱藏第二個列表，使用 aria-hidden='true' 屬性。

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

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; }

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

在這里插入圖片描述

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

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

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

注意：所使用的間距是跑馬燈項目之間的相同間距。

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

/* 啟用動畫 */
.enable-animation .marquee__content {
  animation: scroll 10s linear infinite;
}

最后，將該類添加到你的 section 元素中。

<section className="enable-animation">

有了這些，你的組件應(yīng)該已經(jīng)開始動畫了。

在這里插入圖片描述

動畫跑馬燈

5.如何增強跑馬燈組件

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

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

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

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

有了這個，當(dāng)懸停時它會暫停。

在這里插入圖片描述

懸停時暫停的動畫跑馬燈

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

通過雙擊組件，動畫會以相反的方向播放，顯示用戶剛剛經(jīng)過的信息。這個功能不僅促進了可訪問性，還為你的網(wǎng)頁增添了一種靈活感，因為它提供了一種更快獲取信息的方式。

要實現(xiàn)這一點，首先創(chuàng)建一個反轉(zhuǎn)動畫狀態(tài)。

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

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

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

之后，創(chuàng)建 CSS 類規(guī)則來反轉(zhuǎn)動畫。

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

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

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

最后，根據(jù)需要在組件上動態(tài)添加反轉(zhuǎn)類，這會在雙擊時反轉(zhuǎn)動畫。

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

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

在這里插入圖片描述

雙擊反轉(zhuǎn)的動畫跑馬燈

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

要實現(xiàn)這一點，首先創(chuàng)建一個狀態(tài)來存儲動畫的當(dāng)前暫停狀態(tài)。

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

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

/* 暫停動畫 */
.marquee--paused .marquee__content {
  animation-play-state: paused !important;
}

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

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

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

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

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

有了這個，每次按下空格鍵時，你的組件都會暫停和播放。

在這里插入圖片描述

可以通過空格鍵暫停的動畫跑馬燈

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

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

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

要實現(xiàn)這一點，請在你的圖像中添加 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>

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

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

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

7.結(jié)論

你的 React 跑馬燈組件指南完成了！從規(guī)劃到執(zhí)行，你已經(jīng)深入了解了為你的 Web 項目創(chuàng)建動態(tài)滾動元素。

記住，該組件不僅僅是動畫——它是一個互動的故事。無論是分享重要信息、推廣活動，還是注入活力，你的跑馬燈都是工具箱中多才多藝的一部分。

但這個旅程只是個開始。調(diào)整速度，考慮敏感性，并采用最佳實踐來完善你的跑馬燈。讓創(chuàng)意流動，愿你的滾動故事給用戶留下深刻的印象。

優(yōu)先考慮用戶體驗，嘗試增強功能，并讓你的開發(fā)在 Web 領(lǐng)域中閃耀。祝愉快滾動！

以上就是詳解如何使用React構(gòu)建跑馬燈組件的詳細內(nèi)容，更多關(guān)于React構(gòu)建跑馬燈組件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

目錄

先決條件

1.理解跑馬燈組件

2.跑馬燈的好處

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

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

5.如何增強跑馬燈組件

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

7.結(jié)論

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具