HTML: Marquee
Last updated: Sunday September 21st, 2025
Report this blog
Use of Marquee!
Marquee may be used for cute animations, like these!
Program marquee
Now:
<marquee>Text</marquee>
This is how we can get a simple mobile text! The predetermined direction is left-going, but we can make it go up, down, left, and right :)
For that use direction="up|right|down"
<marquee direction="up|right|down">ヽ(•‿•)ノ</marquee>
Attributes:
Behavior=""
bgcolor=""
Behavior="" shows different kinds of movements.
"scroll" is the predetermined value, which makes it go 'pacman'.
There's also "slide", which slides just once.
And there's "alternate", which makes it bounce
Establishes a background color for the text, which is 'moving'; and inside the background, you must set the color with either a name or a hexadecimal code.
<marquee>XD</marquee>
<marquee behavior="slide">:c</marquee>
<marquee direction="left" behavior="alternate">º-º</marquee>
<marquee bgcolor="blue">(╥﹏╥)</marquee>
<marquee bgcolor="green">¯\_(ツ)_/¯</marquee>
Height
Width
I won't explain what this does...
Use it mainly with vertical stuff and alternate behaviours.
It supports either numbers or percentages (%).
I won't explain what this does...
Use it mainly with horizontal stuff and alternate behaviours.
It supports either numbers or percentages (%).<marquee direction="up" height="120" >o.O</marquee>
<marquee direction="right" width="20" >O.o</marquee>
Scrolldelay="" and Scrollamount=""
Those control the time of movement, which is done in 'steps'.
Scrollamount is the amount of pixels you the in each step. (predetermined value is 6)
Scrolldelay Sets the velocity of each step.
The predetermined value is 75ms, or in US units, the time that a 9mm bullet travels a third of an American football field.
If you want to use time values lower than 60msc., use "truespeed" along with scrolldelay.
<marquee direction="up" height="10" scrolldelay="X" scrollamount="X" truespeed>°.°</marquee>
Loop="# or infinite"
This says how many times the marquee will bounce|slide|scroll.
Without a loop, the values of alternate and scroll are infinite, and the times of slide are 1.
Extra:
How did I show the borders where :P bounced?
Simple, established a class="whatever" inside the marquee, and used this code:
<style>
.whatever{
border: solid;
}
</style>
Also can I make the border rounded but still have the marquee work fine?
Yet, I don't know how to do the rounder borders :(