19.5.3. Alternate Marquee Style

Description of an animation of the alternate marquee style:

To help you understand better the above description, let's see an XHTML MP/WAP CSS example now. It demonstrates the usage of the alternate marquee style. The screenshots of this XHTML MP/WAP CSS example show how the animation actually looks in some mobile phone browsers. The direction of the marquee animation is set to right-to-left in this example.


(marqueeEg5.xhtml)

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>WCSS Tutorial</title>
  </head>

  <body>
    <p style="display: -wap-marquee; -wap-marquee-dir: rtl; -wap-marquee-style: alternate">Hello world.</p>
    <p style="display: -wap-marquee; -wap-marquee-dir: rtl; -wap-marquee-style: alternate">Hello, welcome to our WCSS Tutorial.</p>
  </body>
</html>


Below is the result of the above XHTML MP/WCSS example in a mobile phone browser. As you can see, the first line of text "Hello world." was shorter than the mobile phone browser's screen width. At the beginning, "world." touched the right side of the screen. The line then scrolled across the screen from right to left until "Hello" touched the left side of the screen. The second line of text, "Hello, welcome to our WCSS Tutorial.", was longer than the screen width. At the beginning, "Hello" touched the left side of the screen. The line then scrolled across the screen until the line's end was shown.












Nokia Mobile Browser 4.0


Previous Page Page 35 of 39 Next Page


Feedback Form (ExpandCollapse)

What do you think about this web page?






(Optional) Please provide us more details. For example, suppose you select option 2 above, can you tell us specifically what information is missing? You can also suggest anything that can help us improve this web page.

(Optional) Your name:

(Optional) Your email address:

Please enter again to confirm:

Due to the amount of messages we received, we may not be able to reply to all messages.

A button for going back to the top of this page