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

Preferences - Do not show ads

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.


Scroll Marquee Style

Description of an animation of the scroll marquee style:

  • At the beginning, the marquee block is off one side (left side or right side. It depends on the value of the -wap-marquee-dir WCSS property) of the mobile device's screen totally.

  • Then the marquee block scrolls to the other side of the mobile device's screen.

  • At the end, the marquee block is off the side of the screen totally.

  • The animation repeats if the value of the -wap-marquee-loop WCSS property is larger than 1.

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


Page 33 of 39 Previous Page | Next Page
Contents at a Glance
Print this Web Page | | Back to Top

Feedback Form (Expand)

What do you think about this web page?






WCSS Tutorial Table of Contents WCSS Tutorial Contents at a Glance Preferences - Change Color Scheme Preferences - Do Not Show Ads Previous Page Next Page