使用 React Marquee 創建流暢的跑馬燈效果

React 跑馬燈library官方網站

1. 首先先安裝library

npm install react-fast-marquee --save

2. Import 到你想要的檔案裡面

import MarqueeEffect from "react-fast-marquee";

3.1 Wrap到你的children(子)層級 - 以文字為例

首先創建一個Text component

const Text = ({ text }: { text: string }) => 
{
	return <span className="text-2xl text-teal-400">{text}</span>;
};

我們在App.tsx 下面來解釋範例

function App(){
return (
	<>
		 <h1 className="text-7xl hover:text-sky-500">React Marquee</h1>
		 <MarqueeEffect className="mt-16">
		 		<Text text={"Welcome to JayLinXR Academy!"} />
		 </MarqueeEffect>
 </>
	);
}​

完成後你將會看到以下:

官方文件檔案中，有很多props針對你的需求，去做調整

https://www.react-fast-marquee.com/documentation/#props

以下影片教學，也會做解釋

3.2 Wrap到你的children(子)層級 - 以圖片為例

1.把你想要輪播的圖片放在src/assets/裡，最後路徑會成為src/assets/images

2.為了讓你的檔案能取得圖片路徑，記得要import進去，

import img_1 from "./assets/images/1.png";
import img_2 from "./assets/images/2.png";
import img_3 from "./assets/images/3.png";
import img_4 from "./assets/images/4.png";
import img_5 from "./assets/images/5.png";

3. 接下來創建一個components

const ImageContainer = () => {
	return (
		<>
		</>
};

4.創建圖片陣列，裡面儲存你的圖片

const imgs = [img_1, img_2, img_3, img_4, img_5];

5. 我們要輪播圖片所以用陣列map方法來輪播吧

const ImageContainer = () => {
  const imgs = [img_1, img_2, img_3, img_4, img_5];
  return (
    <>
      <div className="flex items-center gap-10">
        {imgs.map((i, index) => (
          <img alt={"img" + index} src={i} />
        ))}
      </div>
    </>
  );
};

6. 回到App component裡，把他Wrap起來

function App() {
	return (
	<>
		<h1 className="text-7xl hover:text-sky-500">React Marquee</h1>
		<MarqueeEffect className="mt-24" pauseOnHover speed={50}>
			<Text text={"Welcome to JayLinXR Academy!"} />
		</MarqueeEffect>
		<MarqueeEffectclassName="mt-24"pauseOnHoverspeed={80}direction="right">
			<ImageContainer />
		</MarqueeEffect>
	</>)
;}

完成後你將會看到以下:

影片教學和講解

希望透過以上講解跟影片教學，能幫助大家了解這個library呦 :)

官方檔案

https://www.react-fast-marquee.com/

額外資源教學

如何用FIgma製作個人作品集教學 - https://vocus.cc/article/645c733dfd89780001ffe890

學習如何設計好產品 - 使用者經驗設計 | 易用性 | 通用設計 - https://vocus.cc/article/64637f74fd8978000175c0f8

前端教學架設TodoApp

- https://vocus.cc/article/64637f74fd8978000175c0f8

學習如何用HMTL5和CSS3，跟JayLin一起做一個NFT卡片完整課程 - https://vocus.cc/article/64637f74fd8978000175c0f8

更多相關教學文章

JayLinXR YT: https://www.youtube.com/@jaylinxr

JayLinXR IG: https://www.instagram.com/jaylin_xr/

JayLinXR FB: https://www.facebook.com/JayLinXR