React Marquee 是一個輕量級的 React library，不需要寫大量的JavaScript和CSS就可以實現在網頁上創建流暢的跑馬燈效果😃，React 跑馬燈有許多客製化的Props依照你的需求所使用，以下影片跟文章教學，快速教大家來使用
React 跑馬燈library官方網站
- 首先先安裝library
npm install react-fast-marquee --save
- 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";
- 接下來創建一個components
const ImageContainer = () => {
return (
<>
</>
};
4.創建圖片陣列，裡面儲存你的圖片
const imgs = [img_1, img_2, img_3, img_4, img_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>
</>
);
};
- 回到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
