Expert Group of programming
Loading...

The marquee tag, how do we use it

Posted by : Heycode Tech | Posted in : HTML | Dec 5,2015 | 0 comments

As we know that CSS3 is used for animation. We can use any tag and with the property of that tag, wen can implement the animation . But in HTML, a tag : marquee : is self animated tag. When you will use it then no need to write any extra CSS,only add the property (HTML attribute) with this tag .

So let’s see the uses.

HTML

<marquee>

tag is used for animation i.e moving the content between this tag.Now you can use any content like Text, image and use the syntax to move this like left to right,right to left, left and right both,up and down,down and up etc.

Syntax :-

<marquee> &#8230;..content here &#8230;.. </marquee>

Attributes :
This tag have some special attribute which is used to move the content as per own requirement,see the attribute table .

AttributeValueDescription
behaviorscroll
slide
alternate
Define behaviour
directionup
down
left
right
Define direction of scrolling
heightpixels or %Define height of marquee
widthpixels or %Define width of marquee
hspacepixelsDefine horizontal space of marquee
vspacepixelsDefine vertical space of marquee
loopNumber like 1,3,100Define loop of marquee
Default = infinite
scrolldelaySecondsTime interval between each jump
scrollamountnumberDefines how how far to jump.

How to use
Let’s see some example …

1: Scroll Left

<marquee direction="left">This is an example of Marquee with direction left</marquee> 
This is an example of Marquee with direction left

2: Scroll right

<marquee direction="right">This is an example of Marquee with direction right</marquee> 

This is an example of Marquee with direction right

3:Scroll top

<marquee direction="up">This is an example of Marquee with direction up</marquee> 
This is an example of Marquee with direction up

4:Scroll bottom

<marquee direction="down">This is an example of Marquee with direction down</marquee> 
This is an example of Marquee with direction down

5: Scroll left and right both

<marquee behavior="alternate" direction="left">example content</marquee> 
example content
image

6: Scroll hspace

<marquee hspace="90" direction="left">This is an example of Marquee with direction left and hspace </marquee> 

This is an example of Marquee with direction left and hspace

7:Use scrollamount

<marquee behavior="scroll" direction="left" scrollamount="3"> Slow Speed scroll speed </marquee>
<marquee behavior="scroll" direction="left" scrollamount="10"> Medium Speed scroll speed </marquee>
<marquee behavior="scroll" direction="left" scrollamount="17"> Fast Speed scroll speed </marquee>
 

Slow Speed scroll speed
Medium Speed scroll speed
Fast Speed scroll speed

8:Use scrolldelay

<marquee behavior="scroll" direction="left" scrolldelay="1"> scrolldelay effect </marquee>
<marquee behavior="scroll" direction="left" scrolldelay="12"> scrolldelay effect </marquee>
<marquee behavior="scroll" direction="left" scrolldelay="21"> scrolldelay effect </marquee>
 

scrolldelay effect
scrolldelay effect
scrolldelay effect

9: Scroll image

<marquee behavior="alternate" direction="left"><img src="http://heycodetech.com/wp-content/uploads/2015/12/htmlLogo.png" alt="image"></marquee> 
image

10 : Use the JavaScript function :
When mouse down then stop the marquee tag and after mouse up,it will start the marquee tag

 <marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();"> Click Here and hold the mouse marquee stop </marquee> 

Click Here and hold the mouse marquee stop

11: Link Slider Up

<ul>
<marquee onmouseover="this.stop();" onmouseout="this.start();" style="height:200px" direction="up" scrollamount="2" scrolldelay="300">
<li><a href="#">How to Fix HTTP Error When Uploading Images- wordpress</a></li>
<li><a href="#">AngularJS Form Validation</a></li>
<li><a href="#">How to use Ajax in WordPress – Without Plugin</a></li>
<li><a href="#">AngularJs: Functionality of textfield and textarea</a></li>
<li><a href="#">Visual Composer : Visual composer components</a></li>
<li><a href="#">Visual Composer : Create VC shortcode with editor and checkbox</a></li>
<li><a href="#">Visual Composer : Create VC shortcode with textfield and dropdown</a></li>
</marquee>
</ul>

Conclusion :
default-image
Hope so it will help for scrolling the content and image but still if you have any query then please share with me .

Tags:

Author information - Heycode Tech

Every world can ask question and my website registered user give the suggestion.

See all posts by Author

Connect to author

About us

Heycodetech is a platform where you can ask any questions related to the programming like PHP,jQuery, MYSQL,HTML , CSS and moreHere is the Expert group of programming.