marquee-style property CSS Reference



Definition and Usage

This property specifies the style of the marquee.

Name: marquee-style
Value: scroll | slide | alternate
Initial: scroll
Applies to: same as 'overflow'
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified

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 ;
} 

Relative articles