HTML Bouncing Ball Using Nested Marquees

Introduction

Marquee tags used to be quite the popular party guests at HTML cocktail parties. They would enter from the front door, head over to the drinks, keep walking, jump out the window, only to re-enter from the front door. Oh! those crazy tricksters.

Still not jogging your memory? Marquees look like this:

If you want a more immersive experience, visit Evan Goer’s Page of the Damned. It’s simply spectacular.

History

The marquee element was invented by Internet Explorer to try and get an edge on Netscape Navigator. For the babies out there, Netscape was a web browser that dominated the market up until the First Browser War and it had its own proprietary tag, blink. The battle was epic, it was like Ali versus Frazier III but instead of boxing gloves, they had proprietary, equally obnoxious tags.

The marqee tag was pretty popular—look at basically any GeoCities page—but it had some fierce critics. Vicious haters and cowards claimed that the marquee tag was distracting and that it caused issues for users of assistive technology. On both these counts they were right. Haters also said that it was difficult to print out webpages with marquee elements. But really who does that? NOT A PROBLEM. Other two complaints: problem. Printing webpages: not problem.

Due to these complaints, the W3C decided that the marquee tag is not valid HTML, declaring it non-compliant. However, many browsers such as Chrome, Firefox, and Safari continue to support it.

In fact, Firefox and now Chrome support a wide array of attributes. For instance, in addition to rendering marquee tags that scroll horizontally, these browsers allow marquee tags to scroll from top to bottom. Another attribute allows you to reverse the content’s direction once it hits the side of the marquee. These browsers also allow marquee tags to be nested (though Evan Goer does not recommend it)—that is, having one marquee tag inside of another. Put the two and two together, and you get a div that ‘bounces’. In other words, the effect of a ball hitting walls can be achieved with just HTML and some old school CSS.

Creating a Bouncing Ball Using Marquees

Please read the rest of this post in Firefox or Chrome as most other browsers can’t support the nested marqee tags below. Note that it’s way smoother in Chrome.

There are five steps. They are simple. So simple.

Step 1: Create the markup

To start out, we’re gonna nest some divs like they’re dreams and we’re in Inception. Okay so create a container. Inside this container, create a bar-like div. Inside this bar, nest a green square. Ta-da!

1
2
3
4
5

<div class="container">
  <div class="bar">
    <div class="square"></div>
  </div>
</div>

Step 2: Move the square from left to right

Wrap the .square div in a marquee tag and give this marquee tag a behavior attribute of alternate.

1
2
3

<marquee behavior="alternate">
  <div class="square"></div>
</marquee>

Step 3: Move the bar from top to bottom

Repeat step 2 but for the .bar div: wrap it in a marquee tag with the alternate behavior. Add two more attributes: give it a direction of up and give it the height of the container in which it’s nested.

1
2
3
4
5

<marquee behavior="alternate" direction="up" height="300">
  <div class="bar">
    <marquee>...</marquee>
  </div>
</marquee>

Step 4: Nest a circle div inside the square div

Take a look at CSS Trick’s shapes article if you need help styling a circle-shaped div.

1
2
3

<div class="square">
  <div class="circle"></div>
</div>

Step 5: [lowers glasses like Tim Gun] Make it work.

Don’t want to write any of this? I get it. Here’s the Codepen.

Conclusion

Using nested marquee tags is an easy way to create the appearance of a bouncing ball that requires no JavaScript or fancy new CSS and it renders in almost 50% of viewers’ browsers! Yay!

To learn more about the marquee tag, check out Evan Goer’s blog, Zach Holman’s blog, or David Walsh’s letter to the webmaster.

html, marquee