Jak zrobić ruchomy tekst w HTML?

Aby uzyskać ruchomy tekst w HTML, możesz skorzystać z dwóch głównych podejść: klasycznego, czyli przestarzałego już znacznika <marquee>, oraz aktualnych, standardowych metod opartych o CSS (animacje). Oba sposoby mają swoje zastosowania, ale do nowoczesnych projektów zaleca się użycie CSS.

Klasyczny sposób: znacznik <marquee>

Znacznik <marquee> umożliwia szybkie uzyskanie przewijającego się tekstu. Jest prosty w użyciu, jednak nie jest częścią oficjalnego standardu HTML i jego użycie odradza się w projektach produkcyjnych – może przestać być obsługiwany w przyszłości.

Przykładowy kod –

<marquee direction="left" scrollamount="4" scrolldelay="30" onmouseover="this.stop()" onmouseout="this.start()"> To jest ruchomy tekst typu marquee. Najedź kursorem, by zatrzymać animację. </marquee> 

Opis atrybutów –

• direction – kierunek poruszania się tekstu (left, right, up, down);
• scrollamount – szybkość przewijania (im wyższa, tym szybciej);
• scrolldelay – opóźnienie między przesunięciami (w milisekundach);
• onmouseover, onmouseout – zatrzymują/ruszają tekst przy najechaniu/opuszczeniu kursorem.

Nowoczesny sposób – animacje CSS

Rekomendowaną metodą jest użycie animacji CSS, które dają dużo większą kontrolę, są zgodne ze standardami i lepiej integrują się z resztą projektu.

Podstawowy przykład ruchomego tekstu –

1. kod HTML

 <div class="tekst-animowany"> Nowoczesny, ruchomy tekst utworzony za pomocą CSS3. </div> 

2. kod CSS

.tekst-animowany { 
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
	background: #f0f0f0;
}
.tekst-animowany {
	animation: przesuwanieTekstu 10s linear infinite;
}
@keyframes przesuwanieTekstu {
	0% { transform: translateX(100%); }
	100% { transform: translateX(-100%); }
}

Działanie – tekst przesuwa się liniowo z prawej strony na lewą, a animacja powtarza się bez końca.

Zaawansowane przykłady i modyfikacje

• Zmiana kierunku – w animacji CSS odwróć wartości translateX (np. z -100% do 100%);
• Zatrzymywanie animacji po najechaniu – dodaj styl:

.tekst-animowany:hover { animation-play-state: paused; }

• Zmiana prędkości – zmień wartość 10s w deklaracji animation na krótszą (szybciej) lub dłuższą (wolniej);
• Animowany gradient tekstowy – połącz animację tekstu z gradientem dla bardziej efektownego rezultatu.

Przykłady zastosowań ruchomego tekstu

• Banery informacyjne i alerty – przewijające się komunikaty o ważnych wydarzeniach lub promocjach;
• Napisy końcowe – automatyczne przesuwanie napisów, np. w projektach multimedialnych;
• Ticker newsowy – pasek z bieżącymi wiadomościami;
• Efekty dekoracyjne – tworzenie dynamicznego layoutu strony.

Podsumowanie

• Najprostszy sposób – <marquee> – szybki, lecz przestarzały, niezgodny ze standardami;
• Rekomendowany sposób – animacje CSS – elastyczne, skalowalne, zgodne z najnowszymi technologiami frontendowymi;
• dzięki CSS możesz dowolnie stylować ruchomy tekst, zmieniać animacje, prędkość, kierunek i reagować na interakcje użytkownika.

Tworząc animowany tekst, warto postawić na CSS i nowoczesne podejście, które zagwarantuje kompatybilność i większe możliwości personalizacji.