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


A button for going back to the top of this page