INFORMATION & CODE

HTML Marquee Scrolling Credits Display

What This Code Does

The code creates a retro-style scrolling credits display using HTML and CSS. The main feature is an HTML <marquee> element that moves a block of text vertically upward, similar to the end credits of a film or a retro computer display. The JavaScript section is empty, so no JavaScript is used in this example. Everything currently displayed and animated is handled by HTML and CSS.

HTML structure

The document begins with the standard HTML5 declaration, <!doctype html>, followed by the <html> element. The code defines UTF-8 character encoding and a responsive viewport so that the page can display appropriately on different screen sizes.

The <title> sets the browser-tab title to "HTML Marquee Scrolling Credits Display". The external styles.css file is linked with a <link> element, which means the CSS shown separately is expected to be stored in a file named styles.css in the appropriate location. The page also imports two Google Fonts, "Press Start 2P" and "VT323". These fonts are not actually used by the CSS shown, however, because the marquee element specifies "Courier New", monospace as its font. The Font Awesome JavaScript kit is also included, but there are no Font Awesome icons in the HTML, so this external script currently has no visible purpose.

The <body> contains one main <marquee> element. The marquee is an old, non-standard HTML element that browsers historically supported for creating scrolling content. It is important to note that <marquee> is obsolete HTML and should generally not be used for new projects. Modern implementations would normally use CSS animations instead.

The marquee has several attributes that control its animation. behavior="scroll" tells the browser to continuously move the content in the specified direction. scrollamount="2" controls the scrolling speed; in this implementation, the value 2 produces relatively slow movement. loop="1" tells the marquee to perform the animation once rather than repeatedly. direction="up" makes the content move from the bottom toward the top. Finally, height="200" establishes a 200-pixel scrolling area through the HTML marquee attribute.

Inside the marquee is the actual credit content. The <h2> provides the main heading, while the <h3> elements introduce sections such as Behavior Tag, Alternate Tag, Scroll Tag, Slide Tag, Scrollamount Tag, Loop Tag, and Direction Tag. The <li> elements contain individual lines of explanatory text. Nested <ul> elements are used to create lists describing the available values for behavior and direction.

The .textBox section near the end contains the final credit information. It includes messages such as "Happy coding", "Written & Produced by Shane Clarke", and "E-Nash UI". The largeText class is applied to the E-Nash UI text so that it can receive special styling from the CSS. The final <small> element displays ENUI MMXXVI, with MMXXVI being the Roman-numeral representation of 2026.

How the CSS works

The first CSS rule targets the body. padding: 0 and margin: 0 remove the browser's default spacing around the page. background: #ffe gives the page a very pale yellow background.

The marquee rule controls almost all of the visual appearance of the scrolling display. position: absolute allows the marquee to be positioned precisely on the page. top: 100px places its top edge 100 pixels from the top of the containing area, while left: 50% moves its left edge to the horizontal center of the page. Because this would normally leave the element's left edge at the center rather than the element itself being centered, transform: translateX(-50%) shifts it back by half of its own width. Together, these properties center the marquee horizontally.

max-width: 380px prevents the display from becoming wider than 380 pixels. The CSS also specifies height: 250px, which differs from the HTML height="200" attribute. Depending on browser behavior and how the obsolete marquee element is interpreted, these competing values can produce different results, so it would be better to use one consistent CSS-defined size in a modern implementation.

The padding: 0 20px gives the content 20 pixels of horizontal internal spacing. background-color: #000 creates the black background, while color: #0f0 makes most of the text bright green. This produces the familiar green-on-black retro-computer appearance.

The font is set to "Courier New", monospace, giving the content a fixed-width typewriter/computer-terminal appearance. The border is created with 10px double #00cc00, giving the display a thick double green border. border-radius: 20px rounds the corners. The additional outline: 10px solid #00cc00 creates another thick green layer outside the border, while outline-offset: 2px moves that outline slightly away from the main border.

text-align: center centers most of the text inside the marquee. However, the separate li rule overrides this for list items with text-align: left, meaning the individual credit lines are aligned to the left.

The .textBox rule positions the final credit section using absolute positioning. Its top: 1250px value places it far below the top of its containing context. This is an unusual technique because the .textBox is already inside the scrolling marquee. Absolute positioning therefore affects how that particular element participates in the marquee's content layout and can make the final section appear much farther down the scrolling content than the preceding material.

The .reset-bottom class changes the bottom margin of the relevant <h4> elements to -10px. This reduces the normal spacing below those headings and brings the following text closer to them.

The .largeText rule makes E-Nash UI particularly prominent. It changes the text color to bright green, increases the font size to 32 pixels, and sets a very heavy font weight of 900. Its margins are also adjusted with margin: -10px 0 -10px 0, pulling surrounding elements closer together.

Finally, the small selector styles the ENUI MMXXVI text. It changes its color to white, sets the size to 14 pixels, and gives it a relatively heavy font weight of 600.

How the scrolling works

The important part of the animation is actually the <marquee> element rather than JavaScript. When the browser encounters:

            
HTML
<marquee behavior="scroll" scrollamount="2" loop="1" direction="up">
          

it interprets the content as a scrolling region. The content begins below the visible area and moves upward. With behavior="scroll", it continues moving until the content has passed through the marquee. Because loop="1" is specified, the scrolling is intended to occur only once.

The scrollamount value controls how far the content moves during each animation step. A larger value generally results in faster scrolling. Therefore, changing scrollamount="2" to something such as scrollamount="5" would make the credits move considerably faster.

The direction attribute controls the movement direction. In this example it is up, so the credits travel vertically from bottom to top. Historically, the other supported values were down, left, and right.

The code also explains three historical behavior values: scroll, alternate, and slide. scroll continuously moves the content across the marquee, alternate moves the content back and forth, and slide moves the content until it reaches the end of the scrolling region and then stops. These are descriptions of the old <marquee> behavior rather than modern HTML features.

What the JavaScript does

There is no JavaScript code in the supplied JS section:

Consequently, JavaScript does not control the animation, modify the HTML, respond to user actions, or change the CSS. The page is entirely driven by HTML and CSS plus the browser's legacy implementation of <marquee>.

The Font Awesome script in the <head> is JavaScript loaded from an external service, but that is different from having your own JavaScript functionality. Since there are no Font Awesome icons being used, it can be removed without affecting the scrolling credits shown here.

How to use the code

To use the example as written, place the HTML in a file such as index.html and put the supplied CSS in a file named styles.css in the same directory. You can then open index.html in a browser. The Google Fonts and Font Awesome resources are loaded from the internet, so those external resources may require an internet connection.

You can change the actual credit text directly inside the <marquee>. For example, the <h3> headings and <li> elements can be replaced with names, roles, acknowledgements, production information, or other content. You can also change scrollamount to control the speed, direction to change the direction, and loop to control how many times the animation repeats.

For example, the core settings are:

html
<marquee
  behavior="scroll"
  scrollamount="2"
  loop="1"
  direction="up"
  height="200">
          

The main limitation is that <marquee> is obsolete. It is useful for understanding or maintaining an older demonstration such as this one, but for a new website you should replace it with a CSS @keyframes animation. That approach provides substantially more control over speed, timing, responsive behavior, accessibility, and the appearance of the scrolling credits.

In summary, HTML supplies the scrolling content and its structure, the <marquee> element provides the legacy scrolling behavior, CSS creates the retro green-on-black visual design and positioning, and JavaScript currently does nothing because the JS section is empty. The result is a retro terminal-style scrolling credits display that can be customized by changing the marquee attributes, text content, and CSS values.