Marquee element
HTML element for scrolling text
- 5 min read
- 4 chapters
Related on Lably
Through Dynamic web page, HTML and CSS
Usability problems
Marquee can be distracting because the human eye is attracted to movement, and marquee text is constantly moving.
As with the blink element, marquee-tagged images or text are not always completely visible on rendered pages, making printing such pages an inefficient (if not impossible) task; typically multiple attempts are required to capture all text that could be displayed where messages scroll or blink. The behavior="alternate" version of marquee makes text jitter back and forth but does not obscure any part of it if scrolling widths are set correctly.
Because marquee text moves, links within it are more difficult to click than those in static text, depending on the speed and length of the scrolling. Users only get one chance every time it scrolls past. Also, scrolling text too fast can make it unreadable to some people, particularly those with visual impairments. This can easily frustrate users. To combat this, client-side scripting allows marquees to be programmed to stop when the mouse is over them.
Sign in to keep reading
3 more chapters are free with a Lably account.
Attributes
Unlike its blinking counterpart, the marquee element has several attributes that can be used to control and adjust the appearance of the marquee.
align- Uses the same syntax as the img element.
behavior- Allows the user to set the behavior of the marquee to one of three different types:
- Scroll (default) – Scrolls the text from right-to-left, and restarts at the right side of the marquee when it has reached the left side. Text disappears when looping finishes.
- Slide – When used in absence of the "Behavior" attribute, contents to be scrolled will slide the entire length of marquee but stops the moment it hits the end, so that the contents will be displayed. But if it is used with attribute "Behavior" then the attribute "Slide" will be ignored.
- Alternate - Scrolls the text from right-to-left & goes back left-to-right.
bgcolor- Sets the background color of the marquee.
direction- Sets the direction of the marquee box. Values are left, right, up, down where the value indicates the direction of travel.
direction=lefttherefore moves the text from right to left on the screen. width- This sets how wide the marquee should be.
loop- This sets how many times the marquee should "Loop" its text. Each trip counts as one loop.
scrollamount- This is how many pixels the text moves between "frames". So scrollamount=1 gives the slowest scroll speed.
scrolldelay- This sets the amount of time, in milliseconds, between "frames", much like watching a replay of a video where every frame of the video would be paused for x number of milliseconds. "Scrolldelay=1000" means a slow motion where every frame lasts one thousand milliseconds or one second.
A marquee element can contain arbitrary HTML, so in addition to text it could move one or more images, movie clips, or animated GIFs.
Implementation
The marquee tag has been deprecated in most browsers, but the same behavior can still be implemented with Cascading Style Sheets, like this:
<span id="mwSA"></span><span class="linenos" data-line="1" id="mwSQ"></span><span class="p" id="mwSg">@</span><span class="k" id="mwSw">keyframes</span><span class="w" id="mwTA"> </span><span class="nt" id="mwTQ">marquee</span><span class="w" id="mwTg"> </span><span class="p" id="mwTw">{</span> <span class="linenos" data-line="2" id="mwUA"></span><span class="w" id="mwUQ"> </span><span class="nt" id="mwUg">0</span><span class="o" id="mwUw">%</span><span class="w" id="mwVA"> </span><span class="p" id="mwVQ">{</span> <span class="linenos" data-line="3" id="mwVg"></span><span class="w" id="mwVw"> </span><span class="k" id="mwWA">transform</span><span class="p" id="mwWQ">:</span><span class="w" id="mwWg"> </span><span class="nb" id="mwWw">translateX</span><span class="p" id="mwXA">(</span><span class="mi" id="mwXQ">100</span><span class="kt" id="mwXg">%</span><span class="p" id="mwXw">);</span> <span class="linenos" data-line="4" id="mwYA"></span><span class="w" id="mwYQ"> </span><span class="p" id="mwYg">}</span> <span class="linenos" data-line="5" id="mwYw"></span><span class="w" id="mwZA"> </span><span class="nt" id="mwZQ">100</span><span class="o" id="mwZg">%</span><span class="w" id="mwZw"> </span><span class="p" id="mwaA">{</span> <span class="linenos" data-line="6" id="mwaQ"></span><span class="w" id="mwag"> </span><span class="k" id="mwaw">transform</span><span class="p" id="mwbA">:</span><span class="w" id="mwbQ"> </span><span class="nb" id="mwbg">translateX</span><span class="p" id="mwbw">(</span><span class="mi" id="mwcA">-100</span><span class="kt" id="mwcQ">%</span><span class="p" id="mwcg">);</span> <span class="linenos" data-line="7" id="mwcw"></span><span class="w" id="mwdA"> </span><span class="p" id="mwdQ">}</span> <span class="linenos" data-line="8" id="mwdg"></span><span class="p" id="mwdw">}</span> <span class="linenos" data-line="9" id="mweA"></span> <span class="linenos" data-line="10" id="mweQ"></span><span class="p" id="mweg">.</span><span class="nc" id="mwew">marquee-container</span><span class="w" id="mwfA"> </span><span class="p" id="mwfQ">{</span> <span class="linenos" data-line="11" id="mwfg"></span><span class="w" id="mwfw"> </span><span class="k" id="mwgA">white-space</span><span class="p" id="mwgQ">:</span><span class="w" id="mwgg"> </span><span class="kc" id="mwgw">nowrap</span><span class="p" id="mwhA">;</span> <span class="linenos" data-line="12" id="mwhQ"></span><span class="w" id="mwhg"> </span><span class="k" id="mwhw">overflow</span><span class="p" id="mwiA">:</span><span class="w" id="mwiQ"> </span><span class="kc" id="mwig">hidden</span><span class="p" id="mwiw">;</span> <span class="linenos" data-line="13" id="mwjA"></span><span class="w" id="mwjQ"> </span><span class="k" id="mwjg">position</span><span class="p" id="mwjw">:</span><span class="w" id="mwkA"> </span><span class="kc" id="mwkQ">relative</span><span class="p" id="mwkg">;</span> <span class="linenos" data-line="14" id="mwkw"></span><span class="w" id="mwlA"> </span><span class="k" id="mwlQ">animation</span><span class="p" id="mwlg">:</span><span class="w" id="mwlw"> </span><span class="n" id="mwmA">marquee</span><span class="w" id="mwmQ"> </span><span class="mi" id="mwmg">10</span><span class="kt" id="mwmw">s</span><span class="w" id="mwnA"> </span><span class="kc" id="mwnQ">linear</span><span class="w" id="mwng"> </span><span class="kc" id="mwnw">infinite</span><span class="p" id="mwoA">;</span> <span class="linenos" data-line="15" id="mwoQ"></span><span class="p" id="mwog">}</span> <span class="linenos" data-line="16" id="mwow"></span> <span class="linenos" data-line="17" id="mwpA"></span><span class="p" id="mwpQ">.</span><span class="nc" id="mwpg">marquee-content</span><span class="w" id="mwpw"> </span><span class="p" id="mwqA">{</span> <span class="linenos" data-line="18" id="mwqQ"></span><span class="w" id="mwqg"> </span><span class="k" id="mwqw">display</span><span class="p" id="mwrA">:</span><span class="w" id="mwrQ"> </span><span class="kc" id="mwrg">inline-block</span><span class="p" id="mwrw">;</span> <span class="linenos" data-line="19" id="mwsA"></span><span class="p" id="mwsQ">}</span>The animation, marquee, is defined by its @keyframes to be a simple translation from right to left; it would be possible to reverse the animation by inverting it (from -100% to 100%, for example). The 10s can also be modified to alter its output.
The style can then be invoked in HTML:
<span id="mwuQ"></span><span class="linenos" data-line="1" id="mwug"></span><span class="p" id="mwuw"><</span><span class="nt" id="mwvA">div</span> <span class="na" id="mwvQ">class</span><span class="o" id="mwvg">=</span><span class="s" id="mwvw">"marquee-container"</span><span class="p" id="mwwA">><</span><span class="nt" id="mwwQ">div</span> <span class="na" id="mwwg">class</span><span class="o" id="mwww">=</span><span class="s" id="mwxA">"marquee-content"</span><span class="p" id="mwxQ">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<span class="p" id="mwxg"></</span><span class="nt" id="mwxw">div</span><span class="p" id="mwyA">></</span><span class="nt" id="mwyQ">div</span><span class="p" id="mwyg">></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Compliance
The marquee element was first invented for Microsoft's Internet Explorer and is supported by it. Netscape has stipulated removal of the <marquee> element from the Internet Explorer during an HTML ERB meeting in February 1996, as a condition to removing the <blink> element from the Netscape.
Firefox, Chrome and Safari web browsers support it for compatibility with legacy pages. The element is non-compliant HTML. CSS properties were proposed to achieve the same effect as specified in the Marquee Module Level 3, which was abandoned without implementation in 2014. Similar effects can also be achieved through the use of JavaScript, or CSS3 animations.