HTML Bouncing Ball Using Nested Marquees
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.
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
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
Step 2: Move the square from left to right
.square div in a marquee tag and give this marquee tag a behavior attribute of
1 2 3
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
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
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.