Jak zrobić ruchomy tekst w HTML?

Aby utworzyć ruchomy tekst w HTML, najczęściej wykorzystuje się animacje CSS lub niezalecany już dziś, ale wciąż dostępny w wielu przeglądarkach, znacznik <marquee>. W poniższym poradniku znajdziesz szczegółowe informacje na temat obu metod, ich zastosowań, wad, zalet oraz instrukcję krok po kroku wraz z gotowymi przykładami.

Ruchomy tekst za pomocą CSS3 i animacji

Najlepszą, nowoczesną i w pełni wspieraną metodą jest użycie animacji CSS3.

Jak działa animacja tekstu w CSS?

Dzięki CSS3 możesz określić, jak tekst (lub dowolny inny element) będzie się poruszał po stronie. Używamy do tego właściwości @keyframes (definicja animacji) oraz animation (przypisanie animacji do elementu).

Przykład podstawowy – poziomy ruch tekstu

<div class="ruchomy-tekst">
  <p>To jest przykładowy ruchomy tekst utworzony za pomocą CSS3!</p>
</div>

.ruchomy-tekst {
  position: relative;
  width: 400px;
  height: 40px;
  overflow: hidden;
  border: 1px solid #333;
  background: #f5f5f5;
}
.ruchomy-tekst p {
  position: absolute;
  white-space: nowrap;
  left: 100%;
  animation: przesuwanieTekstu 10s linear infinite;
  font-size: 1.2em;
  color: #2c3e50;
}
@keyframes przesuwanieTekstu {
  from { left: 100%; }
  to { left: -100%; }
}

Opis działania:

• Kontener .ruchomy-tekst ogranicza obszar, po którym przesuwa się tekst,
• paragraf z tekstem jest ustawiony absolutnie i rozpoczyna animację od prawej krawędzi, przesuwając się w lewo poza widoczny obszar,
• cykliczność zapewnia parametr infinite, a płynność ruchu – linear.

Ruchomy tekst przy użyciu znacznika <marquee>

Znacznik <marquee> jest prostym sposobem na uzyskanie efektu przewijającego się tekstu, lecz warto wiedzieć, że nie należy do współczesnych standardów (HTML5) i jego użycie jest odradzane przy nowych projektach. Może jednak przydać się w szybkich prototypach lub starych systemach.

Podstawowy przykład

<marquee direction="left" scrollamount="4" scrolldelay="50">
  Przykład działania klasycznego <marquee> - przewijający się tekst.
</marquee>

Najczęściej stosowane atrybuty:

• Direction – kierunek przesuwania (left, right, up, down);
• Scrollamount – szybkość przewijania (im wyższa, tym szybciej);
• Behavior – sposób przewijania (scroll – przewija do końca, alternate – odbija się, slide – raz przewija);
• Onmouseover/ onmouseout – reakcje po najechaniu myszą (np. zatrzymanie animacji).

Rozszerzony przykład – tekst zatrzymujący się po najechaniu

<marquee direction="left" scrollamount="6" onmouseover="this.stop()" onmouseout="this.start()">
  Najedź kursorem, aby zatrzymać przewijanie tego tekstu!
</marquee>

Zastosowania ruchomego tekstu na stronie

Ruchomy tekst może być wykorzystywany w wielu miejscach, m.in.:

• Informacje i ogłoszenia – np. komunikaty o promocjach, ważne aktualności na pasku powiadomień;
• Wyróżnienie treści – elementy call-to-action lub kluczowe dane w dynamicznej prezentacji;
• Galerie zdjęć – podpisy przewijające się pod obrazami;
• Banery reklamowe – scrollujący tekst jako element reklamy;
• Ticker news – dynamiczne paski informacyjne, znane np. z telewizji.

Wady i zalety obu podejść

Animacja tekstu w pionie

Pionowe animacje tekstu mogą być uzyskane z analogiczną prostotą przez modyfikację animacji CSS:

.ruchomy-tekst-poziomy p {
  top: 100%;
  left: 0;
  animation: przesuwaniePion 8s linear infinite;
}
@keyframes przesuwaniePion {
  from { top: 100%; }
  to { top: -100%; }
}

Co wybrać w praktyce?

W bieżących projektach zdecydowanie rekomendowane jest użycie animacji CSS3 ze względu na pełną zgodność i elastyczność w projektowaniu wyglądu. Znacznik <marquee> należy traktować jako ciekawostkę historyczną oraz narzędzie do szybkich demonstracji.

Dobre praktyki

• Stosuj ruchome teksty oszczędnie – nadmierna animacja rozprasza użytkownika;
• Zadbaj o kontrast i czytelność tekstu;
• Pamiętaj o dostępności – użytkownik powinien mieć możliwość zatrzymania przesuwu, np. przez najechanie myszą lub odpowiedni przycisk;
• Testuj animacje na różnych urządzeniach i przeglądarkach.

Stosując powyższe techniki, łatwo i efektownie wyróżnisz ważne treści i urozmaicisz wygląd swojej strony internetowej.