19.5. Controlling the Style of Marquee Animations (-wap-marquee-style Property)

The -wap-marquee-style WCSS property is used to specify how a marquee block should scroll across the screen of a mobile device. The following three marquee styles are available for use by your mobile Internet application:

  1. Scroll

  2. Slide

  3. Alternate

The default value of the -wap-marquee-style property is "scroll". Thus, the marquee animations shown in the earlier screenshots are of the scroll style.


19.5.1. Scroll Marquee Style

Description of an animation of the scroll marquee style:

The following XHTML MP/WAP CSS example shows how a marquee animation of the scroll style looks in some mobile phone browsers. The direction of the marquee animation is set to right-to-left in the following XHTML MP/WAP CSS example. (Note that the default values of the -wap-marquee-dir property and the -wap-marquee-style property are "rtl" and "scroll" respectively, which means the WCSS styles "-wap-marquee-dir: rtl" and "-wap-marquee-style: scroll" can actually be omitted in the following example.)


(marqueeEg3.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: scroll">Hello, welcome to our WCSS Tutorial.</p>
  </body>
</html>


This is the result of the above XHTML MP/WCSS example in a mobile phone browser:












Nokia Mobile Browser 4.0


Previous Page Page 33 of 39 Next Page


A button for going back to the top of this page