--- title: "Marquee" type: component version: "2.2.2" doc_version: "2.7.3" status: stable date: 2026-07-05 library: Frutjam stack: tailwind_css compatibility: universal framework_agnostic: true runtime_requirement: none description: "Pure CSS Tailwind CSS Marquee with infinite scroll, pause-on-hover, reverse direction, and vertical support. No JavaScript required." url: https://frutjam.com/vi/components/marquee --- # Marquee Các thành phần Marquee tạo ra các dải nội dung cuộn vô hạn, liên tục — lý tưởng cho biểu trưng thương hiệu, biểu ngữ thông báo, lời chứng thực hoặc đám mây thẻ. Được xây dựng hoàn toàn bằng hoạt ảnh CSS, vùng chọn Frutjam hỗ trợ các hướng ngang và dọc, tạm dừng khi di chuột, phát lại có thể đảo ngược và kiểm soát tốc độ. Sao chép phần tử `marquee-track` (với `aria-hidden`) để có một vòng lặp liền mạch, không có khoảng trống. Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào. | Lớp học | Kiểu | Sự miêu tả | | ---------------- | --------------- | ------------------------------------------------------------------------- | | marquee | Căn cứ | Vùng chứa bên ngoài - clip tràn và chứa các biến hoạt ảnh | | marquee-track | Công cụ sửa đổi | Cuộn hàng bên trong; sao chép bằng `aria-hidden` để có vòng lặp liền mạch | | marquee-pause | Công cụ sửa đổi | Tạm dừng hoạt ảnh khi di chuột | | marquee-reverse | Công cụ sửa đổi | Cuộn theo hướng ngược lại | | marquee-vertical | Công cụ sửa đổi | Cuộn từ trên xuống dưới thay vì từ trái sang phải | | marquee-slow | Speed | Cuộn chậm (chu kỳ 40 giây) | | marquee-normal | Speed | Tốc độ mặc định (chu kỳ 20 giây) | | marquee-fast | Speed | Cuộn nhanh (chu kỳ 10 giây) | | marquee-fade | Công cụ sửa đổi | Thêm các cạnh mờ dần ở cả hai bên | ## Cách sử dụng cơ bản Thêm hai phần tử `marquee-track` giống hệt nhau — phần tử thứ hai (với `aria-hidden="true"`) sẽ lấp đầy khoảng trống khi phần tử đầu tiên cuộn ra khỏi màn hình. ## Tạm dừng khi di chuột Thêm `marquee-pause` để dừng hoạt ảnh khi người dùng di chuột qua dải. ```html

Hover me to pause the scroll Animation stops here

``` ## Hướng ngược lại Sử dụng `marquee-reverse` để cuộn từ phải sang trái thay vì từ trái sang phải. Kết hợp hai hàng để tạo hiệu ứng xếp lớp. ```html

Alpha Beta Gamma Delta Epsilon

``` ## Các biến thể tốc độ ```html

Slow Slow Slow Slow Slow

Normal Normal Normal Normal Normal

Fast Fast Fast Fast Fast

``` ## Marquee dọc Thêm `marquee-vertical` và đặt chiều cao cố định cho vùng chứa để cuộn từ trên xuống dưới. ```html

Announcement one

Announcement two

Announcement three

Announcement four

Announcement five

``` ## Thẻ công nghệ Một mẫu phổ biến để thể hiện bộ kỹ năng hoặc nhóm công nghệ. ```html

HTML CSS JavaScript TypeScript React Vue Tailwind CSS Node.js

``` ## Khoảng cách tùy chỉnh Ghi đè `--marquee--gap` hoặc `--marquee--duration` bằng tiện ích nội tuyến để tinh chỉnh khoảng cách và tốc độ. ```html

Wide gap Wide gap Wide gap Wide gap

``` ## Làm mờ các cạnh Thêm `marquee-fade` để làm mờ cả hai đầu của dải vào nền trang để có giao diện bóng bẩy. ```html

Design Development Performance Accessibility Open Source Security Testing

``` ## Biểu ngữ thông báo Thanh báo giá mỏng dành cho các chương trình khuyến mãi hoặc thông báo trên toàn trang web. Kết hợp `marquee-fade` và `marquee-pause` để có trải nghiệm tốt nhất. ```html

🎉 Version 2.0 is here — explore what's new 🌿 Built with Tailwind CSS v4 ⚡ Zero JavaScript, pure CSS components 🎨 Fully themeable with CSS variables

``` ## Logo Marquee Giới thiệu các đối tác hoặc thương hiệu đáng tin cậy trong một dải cuộn liên tục. Sử dụng `marquee-fade` để hòa trộn các cạnh vào nền. ```html

Acme

Globex

Initech

Umbrella

Hooli

Pied Piper

Vehement

Massive

``` ## Thẻ chứng thực Cuộn qua các thẻ chứng thực bằng cách tạm dừng khi di chuột một cách tinh tế để dễ đọc. ```html

"Absolutely love the component library. Saves us hours every sprint."

Alex Morgan

Frontend Engineer

"The best Tailwind UI kit I've used. Clean, accessible, and easy to customize."

Jamie Lee

Product Designer

"Shipped our design system 3× faster thanks to Frutjam. Highly recommend."

Sam Rivera

Tech Lead

"Great DX, thoughtful defaults, and the dark mode just works out of the box."

Riley Chen

Full Stack Developer