--- 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/pl/components/marquee --- # Marquee Komponenty markizy tworzą nieskończone, stale przewijane paski treści — idealne do logo marki, banerów reklamowych, referencji lub chmur tagów. Zbudowany w całości z animacji CSS, namiot Frutjam obsługuje kierunki poziome i pionowe, pauzę po najechaniu myszką, odwracalne odtwarzanie i kontrolę prędkości. Zduplikuj element `marquee-track` (z `aria-hidden`), aby uzyskać płynną pętlę bez przerw. Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem. | Klasa | Typ | Opis | | ---------------- | ----------- | ----------------------------------------------------------------------------------- | | marquee | Opierać | Zewnętrzny kontener — klipy przepełniają się i przechowują zmienne animacji | | marquee-track | Modyfikator | Przewijanie wewnętrznego rzędu; zduplikuj z `aria-hidden`, aby uzyskać płynną pętlę | | marquee-pause | Modyfikator | Wstrzymuje animację po najechaniu kursorem | | marquee-reverse | Modyfikator | Przewija w przeciwnym kierunku | | marquee-vertical | Modyfikator | Przewija od góry do dołu zamiast od lewej do prawej | | marquee-slow | Speed | Powolne przewijanie (cykl 40 s) | | marquee-normal | Speed | Domyślna prędkość (cykl 20 s) | | marquee-fast | Speed | Szybkie przewijanie (cykl 10 s) | | marquee-fade | Modyfikator | Dodaje zanikające krawędzie gradientu po obu stronach | ## Podstawowe użycie Dodaj dwa identyczne elementy `marquee-track` — drugi (z `aria-hidden="true"`) wypełnia lukę, gdy pierwszy przewija się poza ekran. ## Wstrzymaj przy najechaniu myszką Dodaj `marquee-pause`, aby zatrzymać animację, gdy użytkownik najedzie kursorem na pasek. ```html
Hover me to pause the scroll Animation stops here
``` ## Odwrotny kierunek Użyj `marquee-reverse`, aby przewijać od prawej do lewej zamiast od lewej do prawej. Połącz dwa rzędy, aby uzyskać efekt warstwowy. ```html
Alpha Beta Gamma Delta Epsilon
Alpha Beta Gamma Delta Epsilon
``` ## Warianty prędkości ```html
Slow Slow Slow Slow Slow
Normal Normal Normal Normal Normal
Fast Fast Fast Fast Fast
``` ## Pionowy namiot Dodaj `marquee-vertical` i nadaj kontenerowi stałą wysokość dla przewijania od góry do dołu. ```html
Announcement one
Announcement two
Announcement three
Announcement four
Announcement five
``` ## Tagi technologiczne Typowy wzór prezentowania zestawu umiejętności lub stosu technologii. ```html
HTML CSS JavaScript TypeScript React Vue Tailwind CSS Node.js
``` ## Niestandardowa luka Zastąp `--marquee--gap` lub `--marquee--duration` wbudowanym narzędziem w celu dostosowania odstępów i szybkości. ```html
Wide gap Wide gap Wide gap Wide gap
``` ## Zanikanie krawędzi Dodaj `marquee-fade`, aby przyciemnić oba końce paska w tle strony i uzyskać dopracowany wygląd. ```html
Design Development Performance Accessibility Open Source Security Testing
``` ## Baner ogłoszeń Wąski pasek informujący o promocjach lub powiadomieniach w całej witrynie. Połącz `marquee-fade` i `marquee-pause`, aby uzyskać najlepsze wrażenia. ```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
``` ## Namiot z logo Prezentuj partnerów lub zaufane marki na stale przewijanym pasku. Użyj `marquee-fade`, aby wtopić krawędzie w tło. ```html
Acme
Globex
Initech
Umbrella
Hooli
Pied Piper
Vehement
Massive
``` ## Karty świadectw Przewijaj karty z referencjami z subtelną pauzą po najechaniu myszką, aby zapewnić czytelność. ```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

```