marquee

Marquee properties for directions, speeds and events in HTML

Spread the love

Marquee is an html tag that is used to animate the element inside it. We can achieve various kinds of animations by setting various properties of marquee and in the following code I am just going to demonstrate that.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<body>
    <marquee>This is default marquee</marquee>
    <marquee direction="left">This is marquee in left direction</marquee>
    <marquee direction="right">This is marquee in right direction</marquee>
    <marquee direction="up" height="200">This is marquee in up direction</marquee>
    <marquee direction="down" height="200">This is marquee in down direction</marquee>
 
    <marquee behavior="scroll"> This is scroll behavior of marquee </marquee>
    <marquee behavior="slide"> This is slide behavior of marquee </marquee>
    <marquee behavior="alternate"> This is alternate behavior of marquee </marquee>
 
    <marquee scrollamount="10"> This is a marquee with scrollamount 10 </marquee>
    <marquee scrollamount="25"> This is a marquee with scrollamount 25 </marquee>
    <marquee scrollamount="50"> This is a marquee with scrollamount 50 </marquee>
    <marquee scrollamount="100"> This is a marquee with scrollamount 100 </marquee>
    <marquee scrollamount="200">This is a marquee with scrollamount 200</marquee>
 
    <marquee scrolldelay="10">This is a marquee with scrolldelay 10</marquee>
    <marquee scrolldelay="25">This is a marquee with scrolldelay  25</marquee>
    <marquee scrolldelay="50">This is a marquee with scrolldelay  50</marquee>
    <marquee scrolldelay="100">This is a marquee with scrolldelay  100</marquee>
    <marquee scrolldelay="200">This is a marquee with scrolldelay  200</marquee>
 
    <marquee onmouseover="this.stop()" onmouseout="this.start()">This marquee will stop on mouseover and will start on mouseout.</marquee>
    <marquee onclick="this.stop()" ondblclick="this.start()">This marquee will stop on mouseclick and start on double click.</marquee>
</body>
</html>

The explanations for the various properties of marquee that are used in the above code is mentioned below:
1. direction: Specifies the direction of movement of marquee and its values can be left, right, up or down.
2. scroll: Specifies the scroll behavior of marquee and its values can be scroll, slide or alternate.
3. scrollamount: Specifies the scroll amount of marquee and its values can be any numeric value. Higher the value, more is the speed of the scrolling.
4. scrolldelay: Specifies the scroll delay in scroll of marquee and its values can be any numeric value. Higher the value, lesser is the speed of the scrolling.
5. onmouseover,onmouseout, onclick, ondblclick are javascript events and we can specify behavior of marquee on these events, as shown in the code above where this.start() starts the scrolling and this.stop stops the scrolling.

marquee


Leave a Reply

Your email address will not be published. Required fields are marked *