13: MARQUEE TAG REVISITED: Lightweight, low-tech animation.

In the 1990s, the Internet was abused with tags like blink and marquee. Hideous stuff. In the last 10 years, these proprietary tags gradually became extinct. Now the marquee effect reappears in modern cascading style sheets (CSS3.) The irony! Today the old HTML marquee tag is well supported among browsers. But the marquee ticker effect was generally ill used by amateurs with no imagination. So I thought I'd challenge myself to do something amateur—but with imagination—and see the result. There are lots of places online to learn the Marquee parameters.

Using the marquee tag was considered a blemish for years. So it was important to make it look different, I went for a vertical scroll (up). The scroll could have contained an embedded GIF or JPEG image (like a logo.) Here is the end result.

The HTML code is just over 1K for the entire page.
How much weight would it take to do this in Adobe Flash or as a GIF animation? I don't know—yet—but I will find out. One of the primary goals of LoBand websites is faster load times. My guess is this effect couldn't be done for less than 100K minimum with other means. How many GIF animation frames would it take to simulate this effect? A bunch.

Is a LoBand slider marquee appropriate or in good taste?
Just because something is LoBand and fast doesn't mean it's "good." Opinions will differ—but most animation is gratutious waste. With that said, just a little motion onscreen attracts the human eye like a magnet. If too much motion is presented, it's overwhelming and garish. It will repel instead of attract. The idea then is use very little and stick to the website communication goal.

Does this slider animation work in all browsers?
Nope! It just worked in the important ones (more on this in a moment.) To do this multiple browser testing, I visited www.browsershots.org and loaded the test page URL. In a matter of minutes, I had results from 32 different browser screens. The only browser that completely flunked was Dillo, a lightweight Linux Debian browser. Anybody using that one? It did show some readable text but that was it.

What matters most in browser testing?
Obviously, consistency from browser to browser. But really only in the most POPULAR browsers. How do you find out what is currently most popular? This chart is from www.w3schools.com
They keep up-to-date web browser statistics. Based on their numbers, it narrowed down the browser screen selections to just 12 screens in different versions of Internet Explorer, Firefox, Google Chrome, Opera, and Safari. All of these rendered properly except Safari. In Safari, the slider still worked but the animated text would overshoot the top by 50 pixels. Which happens to be the same as the specified vertical offset (vspace="50".) So there is a clue and hope of a fix.

css3 animation advanced marquee