English
VietnameseArk Marquee
Thành phần cuộn nội dung liên tục vô tận (marquee) xây dựng trên chuẩn headless Ark UI, hỗ trợ auto-fill, tính toán thời lượng animation mượt mà bằng CSS variables, tương thích hoàn toàn Tailwind CSS v4.
Cơ bản (Basic)
Root, Viewport, Content và Item với tốc độ cuộn mặc định 50px/s.
TáoMón tươi ngon
ChuốiMón tươi ngon
CherryMón tươi ngon
NhoMón tươi ngon
Dưa hấuMón tươi ngon
Dâu tâyMón tươi ngon
Tự động lấp đầy (Auto fill)
Tự động nhân bản item khi danh sách ngắn hơn chiều rộng container.
TáoMón tươi ngon
ChuốiMón tươi ngon
CherryMón tươi ngon
Tạm dừng khi tương tác (Pause on interaction)
Dừng cuộn tự động khi chuột hover hoặc phần tử bên trong nhận focus bàn phím.
TáoMón tươi ngon
ChuốiMón tươi ngon
CherryMón tươi ngon
NhoMón tươi ngon
Dưa hấuMón tươi ngon
Dâu tâyMón tươi ngon
Điều khiển bằng code (Programmatic control)
Sử dụng hook useMarquee và ArkMarquee.RootProvider để tạm dừng, tiếp tục hoặc chạy lại.
TáoMón tươi ngon
ChuốiMón tươi ngon
CherryMón tươi ngon
NhoMón tươi ngon
Dưa hấuMón tươi ngon
Dâu tâyMón tươi ngon
Đảo chiều cuộn (Reverse)
Đảo ngược hướng cuộn chuyển động bằng thuộc tính reverse.
TáoMón tươi ngon
ChuốiMón tươi ngon
CherryMón tươi ngon
NhoMón tươi ngon
Dưa hấuMón tươi ngon
Dâu tâyMón tươi ngon
Cuộn dọc (Vertical)
Đặt thuộc tính side='top' hoặc side='bottom' để chuyển đổi sang hướng cuộn dọc.
TáoMón tươi ngon
ChuốiMón tươi ngon
CherryMón tươi ngon
NhoMón tươi ngon
Dưa hấuMón tươi ngon
Dâu tâyMón tươi ngon
Làm mờ cạnh viền (Gradient Edges)
Sử dụng ArkMarquee.Edge ở hai đầu start và end để tạo hiệu ứng mờ dần nhẹ nhàng.
TáoMón tươi ngon
ChuốiMón tươi ngon
CherryMón tươi ngon
NhoMón tươi ngon
Dưa hấuMón tươi ngon
Dâu tâyMón tươi ngon
Vòng lặp hữu hạn (Finite loops)
Đặt số lần lặp cụ thể bằng loopCount và lắng nghe sự kiện khi hoàn tất.
TáoMón tươi ngon
ChuốiMón tươi ngon
CherryMón tươi ngon
NhoMón tươi ngon
Dưa hấuMón tươi ngon
Dâu tâyMón tươi ngon
Số vòng lặp hoàn tất: 0 / 3Lượt chạy kết thúc: 0
Tùy chỉnh tốc độ (Speed)
Tốc độ được tính toán chính xác theo pixel trên giây (px/s).
Chậm · 25px/s
TáoMón tươi ngon
ChuốiMón tươi ngon
CherryMón tươi ngon
NhoMón tươi ngon
Dưa hấuMón tươi ngon
Dâu tâyMón tươi ngon
Chuẩn · 50px/s
TáoMón tươi ngon
ChuốiMón tươi ngon
CherryMón tươi ngon
NhoMón tươi ngon
Dưa hấuMón tươi ngon
Dâu tâyMón tươi ngon
Nhanh · 100px/s
TáoMón tươi ngon
ChuốiMón tươi ngon
CherryMón tươi ngon
NhoMón tươi ngon
Dưa hấuMón tươi ngon
Dâu tâyMón tươi ngon