WCSS Tutorial: -wap-marquee-style WAP CSS Property. Scroll Style of Marquee Animations

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:

Scroll
Slide
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

Print this Web Page | | Back to Top

Feedback Form (Expand)

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