Znacznik marquee dopiero niedawno został dodany do specyfikacji języka HTML. Jego użycie na stronie jest bardzo wygodne i pozwala na uzyskanie efektu pływającego tekstu. Zaletą jest fakt, że prawidłowo interpretują już go najpopularniejsze przeglądarki. Ponadto bardzo łatwo jest dostosować go do własnych potrzeb. W niniejszym poradniku przedstawię krok po kroku jak umieścić taki znacznik na swojej stronie.
W miejscu na stronie gdzie chcemy umieścić znacznik wpisujemy następujący kod:
Wtedy na ekranie pojawi się:
Na stronie pojawia się tekst z prawej strony, który przepływa w lewą stronę. Po zniknięciu z lewej strony tekst pojawi się ponownie z prawej strony. Tekst, który się pojawia można zmienić zamieniając słowo Test na dowolny inny tekst.
Znacznik pozwala na określenie z której strony ma wypływać tekst. W tym celu należy zmienić wartość atrybutu direction na up - tekst pojawi się z dołu i przepłynie do góry, right - przepływ z lewej do prawej, left - odwrotnie do right oraz down - przeciwnie do wartości up. Domyślną wartością jest left.
Przykładowo jeśli chcemy tekst przepływający z lewej do prawej wystarczy wpisać:
Przy użyciu atrybutów width i height można określić rozmiar pudełka w którym będzie pojawiał się tekst. (W celu pokazania zmian zostanie dodane czarne obramowanie poprzez argument style):
Kolejnym atrybutem, którym można dostosować marquee jest znacznik behavior. Standardowo jest on ustawiony na wartość scroll. Oznacza to, że tekst pojawia się z określonej strony i znika po stronie przeciwnej i ponownie pojawia się z tej samej strony. Jeśli jednak w zamyśle tekst ma się ruszać od prawej strony do lewej, następnie odbić, przelecieć do prawej strony, znowu odbić i tak powtarzać w kółko wartość behavior należy ustawić na alternate:
Istnieje również możliwość uzyskania tekstu, który będzie poruszał się zygzakiem można to osiągnąć umieszczając marquee w marquee:
Zachowanie tekstu bardzo łatwo wytłumaczyć: pierwsze marquee kontroluje odbijanie prawo-lewo, a drugi znacznik góra-dół.
Prędkość animacji można zmienić przy pomocy dwóch atrybutów. Pierwszy z nich scrollamount pozwala na określenie o ile ma się przesuwać tekst. Standardowo wartość wynosi 6. Drugi parametr scrolldelay określa co ile milisekund tekst ma wykonać krok określony przez scrollamount. Ten atrybut jest standardowo ustawiony na wartość 85. (Co daje zaledwie 11 klatek na sekundę. Dla płynnego efektu lepiej ustawić ten argument na 40 dla 24 klatek na sekundę).
Żeby lepiej zrozumieć obywa atrybuty proponuje zapoznać się z poniższymi dwoma przykładami:
Jak widać im mniejszy scrolldelay tym animacja jest płynniejsza. W celu uzyskania płynnej animacji warto użyć wartości 40 (25 klatek na sekundę) co spowoduje płynne złudzenie optyczne. W celu uzyskania super płynnej jakości jak w dzisiejszych filmach wartość można ustawić na 16 lub 17. W ten sposób można uzyskać 60 klatek na sekundę.
Należy jednak pamiętać, że im większa częstotliwość odświeżania animacji tym więcej mocy komputera jest potrzebna, dlatego warto ograniczyć częstotliwość odświeżania tak bardzo jak to możliwe.
Atrybut loop pozwala określić ile razy animacja ma zostać wykonana. Nieokreślenie tego parametru powoduje, że animacja jest nieskończona.
Znacznik marquee można stylizować przy użyciu atrybutu style. W przypadku, gdy chcemy zmienić tło można użyć atrybutu bgcolor. Wartością jest wtedy szesnastkowa wartość koloru, czyli postaci #XXX lub #XXXXXXX. W celu uzyskania zielonkawego tła można wpisać:
Animację można kontrolować przy pomocy kodu javascript oraz metod start i stop. W celu ich efektywnego wykorzystania warto skorzystać z zdarzeń onmouseover i onmouseout:
Niestety to rozwiązanie nie działa w przeglądarce Mozilla Firefox
W znaczniku marquee można umieszczać nie tylko tekst. Przykładowo można wstawić obrazek:
Innym ciekawym wykorzystaniem marquee jest próba zachęcenia do kliknięcia linku: