Aby stworzyć przesuwający się tekst w HTML, masz do wyboru dwa główne podejścia: przestarzały, ale szybki znacznik <marquee> oraz nowoczesne, w pełni kontrolowane rozwiązania za pomocą CSS z animacjami. Poniżej znajdziesz szczegółowy poradnik dla obu metod, z przykładami, wariantami zastosowań i objaśnieniami poszczególnych parametrów.
Przesuwający się tekst za pomocą <marquee>
Znacznik <marquee> jest prosty w użyciu i pozwala szybko uzyskać efekt przesuwającego się tekstu w poziomie lub pionie. Warto jednak pamiętać, że jest on traktowany jako przestarzały (deprecated) i nie jest zalecany w profesjonalnych, nowoczesnych projektach. Nadal działa w wielu przeglądarkach.
Składnia podstawowa
<marquee>Przykładowy przesuwający się tekst</marquee> Parametry i opcje
- Direction – kierunek przesuwania się tekstu (
left,right,up,down); - Behavior – sposób zachowania się tekstu (
scroll,slide,alternate); - Scrollamount – szybkość przesuwania, wyrażona w pikselach;
- Scrolldelay – opóźnienie przesuwania, im mniejsza wartość, tym płynniejszy ruch;
- Bgcolor – tło obszaru
<marquee>; - Onmouseover / onmouseout – zatrzymanie animacji po najechaniu.
Przykład przesuwającego się tekstu
<marquee direction="left" scrollamount="5" scrolldelay="30" onmouseover="this.stop()" onmouseout="this.start()" bgcolor="#f3f3f3"> Przykład przesuwającego się tekstu. Najedź na tekst, by go zatrzymać. </marquee> Przesuwający się tekst za pomocą css (zalecane)
Za pomocą CSS3 i animacji kluczowych osiągniesz ten sam efekt, przestrzegając współczesnych standardów oraz mając większą kontrolę nad wyglądem i zachowaniem animacji.
Kod html i css
<div class="przesuwany-tekst"> <p> Ten tekst przesuwa się z prawej do lewej wykorzystując animację CSS. </p> </div> .przesuwany-tekst { position: relative; overflow: hidden; width: 500px; height: 2.2em; border: 2px solid #999; background: #f9f9f9; } .przesuwany-tekst p { position: absolute; white-space: nowrap; margin: 0; animation: przesuwanie 15s linear infinite; } .przesuwany-tekst p:hover { animation-play-state: paused; } /* Kluczowa animacja przesuń z prawej do lewej */ @keyframes przesuwanie { 0% { left: 100%; } 100% { left: -100%; } } Wyjaśnienia
- Overflow: hidden; – ukrywa tekst wychodzący poza kontener;
- White-space: nowrap; – tekst w jednej linii;
- Animation: przesuwanie 15s linear infinite; – stała prędkość, powtarzalność animacji;
- Animation-play-state: paused; – zatrzymuje animację po najechaniu myszą.
Możliwości modyfikacji
- Możesz zmienić czas trwania animacji (
15s), by przyspieszyć lub zwolnić przesuwanie, - edytuj szerokość kontenera, by dostosować efekt do layoutu strony,
- użyj innego kierunku przesuwania, modyfikując kluczowe wartości left/top w animacji.
Zastosowania przesuwającego się tekstu
- Paski ogłoszeń lub powiadomień – np. ważne komunikaty nad nagłówkiem strony;
- Wyniki na żywo – np. sportowe, giełdowe, newsy;
- Reklamy i informacje promocyjne – subtelnie przyciągające uwagę użytkownika;
- Efekty dekoracyjne – np. animowane cytaty, podpisy pod zdjęciami.
Przykład z własnym stylem i pauzą animacji
<div class="ticker"> <span> Nowość: Skorzystaj z letnich promocji! Zobacz szczegóły na naszej stronie. </span> </div> .ticker { width: 100%; background: #333; color: #fff; overflow: hidden; position: relative; height: 2em; } .ticker span { display: inline-block; padding-left: 100%; white-space: nowrap; animation: przesuwanie-ticker 20s linear infinite; } .ticker:hover span { animation-play-state: paused; } @keyframes przesuwanie-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } Efekt jest odpowiedni do banerów na górze strony. Animacja zatrzyma się po najechaniu myszą, co poprawia dostępność i wygodę użytkownika.
Podsumowanie – do efektu przesuwającego się tekstu w HTML najprościej użyć znacznika <marquee>, lecz dla profesjonalnych zastosowań zdecydowanie rekomendowane są animacje CSS. Pozwalają one na pełną kontrolę nad efektem, estetyką, wydajnością oraz zgodnością ze standardami. W obu przypadkach można łatwo wprowadzić modyfikacje, dopasowując efekt do własnych potrzeb oraz stylistyki strony.
Warto pamiętać o umiejętnym stosowaniu tego efektu, by nie przytłoczyć użytkownika nadmiarem ruchomych elementów. Przesuwający się tekst to narzędzie przyciągania uwagi – stosuj je więc tam, gdzie faktycznie ma to wartość dla odbiorcy.
