pytanie zadane 18 kwietnia 2022 w Programowanie przez użytkownika

1 odpowiedź

odpowiedź 18 kwietnia 2022 przez użytkownika
edycja 13 maja 2022 przez użytkownika

Ruchomy tekst na stronie internetowej, najczęściej robi się za pomocą JavaScriptu lub CSS, choć nie znaczy że najprościej. Ale można to zrobić również, tak jak chcesz w HTML. 

Używa się do tego niestandardowego znacznika <marquee>, który niestety nie w każdej przeglądarce internetowej może zadziałać. Ale za to metoda jest bardzo prosta i każdy webmaster sobie z tym poradzi.

Poniżej listing jak to wygląda od strony kodu HTML:

<html>
<head>
</head>
<body>
<marquee direction="up" width="200" height="200" scrollamount="2">
<center><br>
To jest przykładowy ruchomy tekst:<br><br>
Tekst 1<br>
Tekst 2<br>
Tekst 3<br>
Tekst 4<br>
Tekst 5<br>
Tekst 6<br>
Tekst 7<br>
Tekst 8<br>
Tekst 9<br>
Tekst 10<br>
Tekst 11<br>
Tekst 12<br>
</center>
</marquee><br>
</body>
</html>

I efekt tego kodu będzie taki na stronie internetowej:

 ruchomy tekst w html

W zasadzie wszystkie funkcję ruchomego tekstu ustawiasz w znaczniku <marquee>.

Kierunek przesuwania

direction="up"

Tutaj ustawiasz w którym ma się przesuwać tekst. W przykładzie jest że up. czyli z dołu do góry. Używając przełączników up | down | left | right można zmienić kierunek przesuwania.


Szybkość przesuwania 

scrollamount="2"

Tutaj wartość liczbowa, która im wyższa tym szybciej przesuwa się tekst.
 

Oczywiście możesz dostosować dowolnie rozmiar (wysokość i szerokość) okna w którym będzie się pojawiał przesuwny tekst. Warto dodać, że nie musi tam być tylko sam tekst, można w<marquee> wkleić dowolny obiekt typu grafika, zdjęcie lub film, które będą się przemieszczały tak samo jak tekst z przykładu.


Zgodnie ze słuszną uwagą naszego czytelnika (dziękuje), nie polecam używania znacznika <marquee>, gdyż nie jest on zgodny ze specyfikacją HTML i nie na wszystkich przeglądarkach może poprawnie działać. Generalnie został stworzony dla pamiętnego Internet Explorer. Powyższy przykład jest tylko poglądowy.

Natomiast podobny efekt można uzyskać używając np. A CSS marquee demo

...