Softonic

Generator tekstu do przewijania

Krok 1 / 2
Dalej

Przewijane nagłówki to sposób, w jaki paski informacyjne, notowania akcji oraz banery wydarzeń prezentują dużą ilość danych na wąskim obszarze ekranu. Ten generator odtwarza klasyczny efekt HTML <marquee> za pomocą czystej animacji CSS @keyframes i transform: translateX(), dzięki czemu technika ta działa we wszystkich nowoczesnych przeglądarkach bez przestarzałego znacznika. Wybierz wiadomość, ustaw szybkość (w sekundach na cykl), określ kolory i rozmiar czcionki, a następnie podejrzyj pasek na żywo, zanim odtworzysz go za pomocą CSS pokazanego poniżej.

Jak stworzyć przesuwający się baner

  1. 1

    Wpisz wiadomość

    Wpisz nagłówek. Krótkie zdania (4–10 słów) najlepiej się wyświetlają na ruchomej liście.

  2. 2

    Wybierz prędkość

    Im mniejsza liczba sekund, tym szybsze przesuwanie ekranu. Okres 30–60 sekund na jeden cykl wystarcza dla listów informacyjnych w stylu wiadomości.

  3. 3

    Ustaw kolor i wielkość

    Wybierz kolor tekstu, tło paska oraz rozmiar czcionki odpowiadający wysokości nagłówka.

  4. 4

    Przegląd w czasie rzeczywistym

    Demo animuje się w czasie rzeczywistym, aby można było ocenić czytelność tekstu przed publikacją.

  5. 5

    Odtwórz w CSS

    Skopiuj pokazany poniżej wzorzec `@keyframes` i `transform: translateX()` do własnego arkusza stylów, aby odtworzyć pasek na swojej stronie.

Dlaczego animacje CSS zamiast <marquee>

Oznaczenie <marquee> zostało wycofane z użycia w HTML5 i przez WHATWG uznano je za przestarzałe. Choć przeglądarki nadal je renderują, narzędzia dostępnosciowe oraz programy walidacyjne zgłaszają problemy, a użytkownik traci dokładną kontrolę nad efektami zwolnienia i powtarzania animacji. Animacja typu transform: translateX() umieszczona w strukturze overflow: hidden generuje identyczne zachowanie wizualne przy użyciu współczesnych narzędzi.

Regulacja prędkości

Czas przejścia zależy zarówno od trwania okna, jak i jego całkowitej szerokości. Ogólna zasada dla okna o rozmiarze 1200 px:

Trwałość Wrażenie Typowe zastosowanie
10–20 s szybkość, koncentracja promocje nagłe, ostrzeżenia nagłe
30–45 s Przegląd wiadomości wyniki meczów w czasie rzeczywistym, paski nagłówków
60–90 s Atmosfera Oznaczenia na miejscu, sale konferencyjne
120 s + Mniej więcej nie poruszane Banery dekoracyjne marki luksusowych

Lista kontrolna dostępności

  • Owiń pasek znacznikiem role="marquee" lub aria-live="off", aby programy do odczytywania ekranu nie powtarzały wiadomości przy każdym cyklu.
  • Uwzględnij ograniczenie ruchu za pomocą @media (prefers-reduced-motion: reduce) { animation: none; } i wyświetl tekst statycznie.
  • Utrzymuj stosunek kontrastu co najmniej na poziomie 4,5:1 między tekstem a tłem; poruszający się tekst jest trudniejszy do odczytania niż tekst statyczny.
  • Nie umieszczaj kluczowych informacji (informacje prawne, ceny, komunikaty o błędach) wyłącznie w pasku przewijanym.

Najczęściej zadawane pytania

Nie. Podglądem jest element <div> zawierający overflow: hidden oraz animację CSS @keyframes, która przesuwa wewnętrzny fragment tekstu za pomocą translateX; element ten spełnia wymogi współczesnego HTML5.

Dodaj animation-play-state: paused do selektora przesuwającego się na kontenerze. Niektórzy użytkownicy uważają, że to bardziej wygodne niż stosowanie stałej pętli.

Tak. Zmienij końcową wartość @keyframes z translateX(-100%) na translateX(100%) i zaczynaj od -100%, aby zmienić kierunek działania. Przydatne dla języków RTL.

Nie. Transformacje CSS są wykonywane na GPU, a tekst w strukturze DOM jest standardowym kodem HTML, więc programy do skanowania internetu mogą go odczytywać normalnie, a animacja nie blokuje głównego wątku wykonywania.

Wszystko pozostaje w przeglądarce podczas prezentacji. Nie jest żadnych danych pobieranych ani zapisywanych.

Powiązane narzędzia

Symbol „mniejsze lub równe"

Skopiuj znak ≤ oraz powiązane matematyczne symbole porównania. Obejmuje Unicode, encje HTML i zapis LaTeX do arkuszy kalkulacyjnych, prac naukowych i stron internetowych.

Generator nazw miast

Generuj fikcyjne nazwy miast, miasteczek, wsi i stolic do worldbuildingu, map, gier, opowieści i danych testowych, z krótkimi notatkami do każdego wyniku.

Generator nazw domenowych

Generuj pomysły na nazwy domenowe z jednego słowa kluczowego: prefiksy, sufiksy, podwojone litery i końcówki cyfrowe w sześciu popularnych TLD.

Konwerter tekstu przyjaznego dyslektykom

Przeformatuj wklejony tekst na krótkie akapity i linie o około 72 znakach, aby łatwiej się czytało. Skopiuj wynik do dowolnego dokumentu, e-maila lub edytora.

Symbole strzałek do skopiowania

Kopiuj popularne strzałki Unicode jednym kliknięciem: proste, podwójne, ukośne, zawinięte, okrężne i trójkątne do dokumentów, czatu i projektów.

Cudzysłowy do kopiowania

Przeglądaj 18 par cudzysłowów prostych, drukarskich, europejskich, ozdobnych i CJK. Kopiuj znak otwierający, zamykający lub oba wraz z punktami kodowymi Unicode.

Narzędzie jest dostępne w innych językach