codescracker


css

CSS3 Marquee



« Previous Tutorial Next Tutorial »


CSS3 enables you to produce marquee effects on the content of HTML elements.

The marquee effects slowly move the content of a box from one side to another side, so that all parts of the box are visible at least once.

You can also specify the speed of the movement, the direction of movement, and how far the content will be moved.

The properties that produce the marquee effects are given as follows :

Let's discuss these properties one by one in detail.

CSS3 marquee-style

The marquee-style specifies a style to move the content of an element.

The syntax to use the marquee-style property is given as follows:

marquee-style: value;

In the preceding syntax, the description of the various values is described in the table given below :

Value Description
scroll Specifies the moving style in which the element starts moving from one side, scrolls all the way across and then stops.
slide Specifies the moving style in which the element starts moving from one side, scrolls in, and stops if no more content is available.
alternate Specifies the moving style in which the element starts moving from both sides alternatively.

CSS3 marquee-loop

The marquee-loop determines how often the content moves.

For example, an element that is outside the viewport starts moving when it is scrolled into view.

The syntax to use the marquee-loop property is given as follows :

marquee-loop: <non-negative-integer> | infinite;

CSS3 marquee-direction

The marquee-direction specifies the initial direction in which the content will move.

The syntax to use the marquee-direction property is given as follows :

marquee-direction: forward | reverse;

CSS3 marquee-speed

The marquee-speed determines how fast the content scrolls.

The syntax to use the marquee-speed property is given as follows :

marquee-speed: slow | normal | fast;

CSS3 marquee shorthand

The marquee specifies the shorthand to specify the marquee-style, marquee-loop, marquee-direction, and marquee-speed properties.


« Previous Tutorial Next Tutorial »




Tools
Calculator

Quick Links
Signup - Login - Give Online Test