--- 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/id/components/marquee --- # Marquee Komponen tenda membuat strip konten yang tak terbatas dan terus bergulir — ideal untuk logo merek, spanduk pengumuman, testimonial, atau tag cloud. Dibangun seluruhnya dengan animasi CSS, tenda Frutjam mendukung arah horizontal dan vertikal, jeda-saat-melayang, pemutaran reversibel, dan kontrol kecepatan. Gandakan elemen `marquee-track` (dengan `aria-hidden`) untuk loop yang mulus dan tanpa celah. Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun. | Kelas | Jenis | Keterangan | | ---------------- | -------- | -------------------------------------------------------------------------- | | marquee | Basis | Wadah luar — klip meluap dan menampung variabel animasi | | marquee-track | Pengubah | Menggulir baris dalam; duplikat dengan `aria-hidden` untuk loop yang mulus | | marquee-pause | Pengubah | Menjeda animasi saat mengarahkan kursor | | marquee-reverse | Pengubah | Menggulir ke arah yang berlawanan | | marquee-vertical | Pengubah | Menggulir dari atas ke bawah, bukan dari kiri ke kanan | | marquee-slow | Speed | Gulir lambat (siklus 40 detik) | | marquee-normal | Speed | Kecepatan default (siklus 20 detik) | | marquee-fast | Speed | Gulir cepat (siklus 10 detik) | | marquee-fade | Pengubah | Menambahkan tepi fade-out gradien di kedua sisi | ## Penggunaan Dasar Tambahkan dua elemen `marquee-track` yang identik — elemen kedua (dengan `aria-hidden="true"`) mengisi celah saat elemen pertama bergulir keluar layar. ## Jeda saat Melayang Tambahkan `marquee-pause` untuk menghentikan animasi ketika pengguna mengarahkan kursor ke strip. ```html
Hover me to pause the scroll Animation stops here
``` ## Arah Terbalik Gunakan `marquee-reverse` untuk menggulir dari kanan ke kiri, bukan dari kiri ke kanan. Gabungkan dua baris untuk efek berlapis. ```html
Alpha Beta Gamma Delta Epsilon
Alpha Beta Gamma Delta Epsilon
``` ## Varian Kecepatan ```html
Slow Slow Slow Slow Slow
Normal Normal Normal Normal Normal
Fast Fast Fast Fast Fast
``` ## Tenda Vertikal Tambahkan `marquee-vertical` dan berikan ketinggian tetap pada wadah untuk gulir dari atas ke bawah. ```html
Announcement one
Announcement two
Announcement three
Announcement four
Announcement five
``` ## Tag Teknologi Pola umum untuk menampilkan keahlian atau tumpukan teknologi. ```html
HTML CSS JavaScript TypeScript React Vue Tailwind CSS Node.js
``` ## Kesenjangan Kustom Ganti `--marquee--gap` atau `--marquee--duration` dengan utilitas inline untuk menyempurnakan jarak dan kecepatan. ```html
Wide gap Wide gap Wide gap Wide gap
``` ## Tepi Pudar Tambahkan `marquee-fade` untuk memudarkan kedua ujung strip ke latar belakang halaman agar terlihat lebih halus. ```html
Design Development Performance Accessibility Open Source Security Testing
``` ## Spanduk Pengumuman Bilah ticker tipis untuk promosi atau pemberitahuan di seluruh situs. Gabungkan `marquee-fade` dan `marquee-pause` untuk pengalaman terbaik. ```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
``` ## Tenda Logo Pamerkan mitra atau merek tepercaya dalam strip yang terus bergulir. Gunakan `marquee-fade` untuk memadukan tepian ke latar belakang. ```html
Acme
Globex
Initech
Umbrella
Hooli
Pied Piper
Vehement
Massive
``` ## Kartu Kesaksian Gulir ke seluruh kartu testimonial dengan jeda halus saat mengarahkan kursor agar mudah dibaca. ```html

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

A

Alex Morgan

Frontend Engineer

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

J

Jamie Lee

Product Designer

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

S

Sam Rivera

Tech Lead

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

R

Riley Chen

Full Stack Developer

```