Category Marquee Tag

Marquee Tag

Here’s are some example of how to use <marquee> tag in HTML:

Scroll Up

Example:

<marquee width="60%" direction="up" height="100px">
This is a sample scrolling text that has scrolls in the upper direction.
</marquee>

Output:

This is a sample scrolling text that has scrolls in the upper direction.

Scroll Down

Example:

<marquee width="60%" direction="down" height="100px">
This is a sample scrolling text that has scrolls texts to down.
</marquee>

Output:

This is a sample scrolling text that has scrolls texts to down.

Scroll Left to Right

Example:

<marquee width="60%" direction="right" height="100px">
This is a sample scrolling text that has scrolls texts to right.
</marquee>

Output:

This is a sample scrolling text that has scrolls texts to right.

Scroll Right to Left

Example:

<marquee width="60%" direction="left" height="100px">
This is a sample scrolling text that has scrolls texts to left.
</marquee>

Output:

This is a sample scrolling text that has scrolls texts to left.

Scrolling Speed

Marquee speed can be changed using the “scrollmount” attribute. For example, if you are using scrollmount="1" then it sets the marque to scroll very slowly, and as you increase the “scrollmount,” the scrolling speed will also increase.

Example:

<marquee behavior="scroll" direction="up" scrollamount="1">Slow Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="12">Little Fast Scrolling</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="50">Very Fast Scrolling</marquee>

Output:

Slow Scrolling Little Fast Scrolling Fast Scrolling Very Fast Scrolling

Blinking Text within Marquee

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

    <head>
        <title>Example of a blinking text using CSS within a marquee</title>
        <style>
            .blink {
                animation: blinker 1.5s linear infinite;
                color: red;
                font-family: sans-serif;
            }
            @keyframes blinker {
                50% {
                    opacity: 0;
                }
            }
        </style>
    </head>

    <body>
        <marquee class="blink">This is an example of blinking text using CSS within a marquee.</marquee>
    </body>

</html>

This is an example of blinking text using CSS within a marquee.

Output:

Example of a blinking text using CSS within a marquee This is an example of blinking text using CSS within a marquee. This is an example of blinking text using CSS within a marquee.