marquee-style property CSS Reference

Definition and Usage

This property specifies the style of the marquee.

Syntax

marquee-style: scroll | slide | alternate;

Values

scroll

Start completely off one side, scroll all the way across and completely off. The following pseudo-code defines the behavior when the marquee direction is to the left (see 'marquee-direction'). The other directions are analogous.

1. Set the element to clip the overflow to the left and to the right
2. Create an anonymous box B around the content; set its 'width' so as to include all content and all overflow exactly; set its 'margin-right' to 'auto'
3. Set n to the value of 'marquee-play-count'
4. While n != 0:
   1. Set 'margin-left' of B to 100% (i.e., all contents is off to the right and thus invisible)
   2. Decrease 'margin-left' at constant speed (see 'marquee-speed') until 'margin-right' is 100% (i.e., all content is off to the left and thus invisible)
   3. Decrease n by one

slide

Start completely off one side, scroll in, and stop as soon as no more content is off that side. The following pseudo-code defines the behavior when the marquee direction is to the left (see 'marquee-direction'). The other directions are analogous.

1. Set the element to clip the overflow to the left and to the right
2. Create an anonymous box B around the content; set its 'width' so as to include all content and all overflow exactly; set its 'margin-right' to 'auto'
3. Set n to the value of 'marquee-play-count'
4. While n != 0:
   1. Set 'margin-left' of B to 100% (i.e., all contents is off to the right and thus invisible)
   2. Decrease 'margin-left' at constant speed (see 'marquee-speed') until 'margin-right' is 0
   3. Decrease n by one

alternate

Bounce back and forth. The following pseudo-code defines the behavior when the initial marquee direction is to the left (see 'marquee-direction'). The other directions are analogous.

1. Set the element to clip the overflow to the left and to the right
2. Create an anonymous box B around the content; set its 'width' so as to include all content and all overflow exactly
3. Set r to false
4. Set n to the value of 'marquee-play-count'
5. While n != 0:
   1. If r, set 'margin-right' of B to 0 and 'margin-left' to 'auto'; else, set 'margin-left' of B to 0 and 'margin-right' to 'auto'
   2. If r, decrease 'margin-right' at constant speed (see 'marquee-speed') until 'margin-left' is 0; else, decrease 'margin-left' at constant speed until 'margin-right' is 0
   3. Set r to ¬r (i.e., the next loop will move in the opposite direction)
   4. Decrease n by one

Examples

.class {
    marquee-style: slide ;
}