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.)


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "">

<html xmlns="">
    <title>WCSS Tutorial</title>

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

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

Contents at a Glance (Click Here for Full Table of Contents)
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