Marquee, a once-coveted web design element, returns to fashion in CSS form
Scrolling text, or marquee, was one of those “must have” web design elements in the 1990s.
Yes, too-small text in garish colors rolling across the screen at an impossible-to-read pace was once quite the fashion statement (as was those classic, odometer-styled “Visitor Counters” you still see once in a while).
As we know about fashion, what was once “in” and now “out” can quickly become “in” again. That’s where we are with scrolling text. In again. I think.
It sure seems like there is renewed interest in marquees, anyway. SportsEngine Product Manager Rob Bedeaux recently posted a blurb in the Community Forum that provided a code block for placing scrolling text on a page.
As folks played around with the code, the questions, naturally, streamed into the forum: How do I increase the size of the message? How do I keep the message from being cut off after a certain number of characters? How do I make the scroll longer and slower? How do I make it work on both a desktop browser and in mobile?
After a deep immersion in basic (extremely basic) CSS – and much trial and error – I think all those questions were sufficiently answered in the forum thread. Quackit Tutorials proved to be extremely useful in trying different combinations before eventually cracking the desired CSS code for all browsers and devices (this is all Kindergarten level stuff for developers but master's degree-caliber coding for me).
We already see marquees being used in multiple ways. Bedeaux has a scrolling text rolling across the top of the Minneapolis High School & Youth Lacrosse site announcing: Fall Boys Registration is now Open!! He even linked the message to the site’s fall boys registration page.
Bryan Hopper of Blue Star Lacrosse has a list of all the colleges that have secured commitments from Blue Star players scrolling across the top of the club’s home page.
On the Phoenix-based Legacy Soccer site, webmaster Kathy Belles added this message in a scroll at the top of her Managers Corner page: Player passes should be complete this week. Double check your official roster is correct!!!
We could envision scrolling text also being used for breaking news, field closures, major schedule changes and most anything else worthy of attention and, preferably, with a short shelf life. Scrolling text, like any other page element, will eventually lose its impact if overused.
A look at how to install CSS marquees on your SportsEngine site:
We grabbed the scrolling text code from Quackit, which offers multiple styles of animation. We recommend you place your message in the code example on the Quackit page and hit "Refresh Result" to get an idea how your message will look. As an example, longer messages might require bumping up the width from the default 100%.
Log in with your SportsEngine account. Toggle into Edit Mode. Navigate to the page on which you want your scrolling text to appear. Select the Options tab at the top of the page. Click the Edit <HEAD> Code link. Paste your code into the Single Page <HEAD> Code text field. Do not put the very last piece of code, the HTML portion marked <div class="example1"> in the head code. We'll place that portion of code on the page in the next step using the Code Element.
The final step is to place that list piece of code -- your message -- on the page using the Code element. First, decide where on the page you want your scrolling text to appear. Click the Add Page Element link. Then scroll down and chose the Code option. Paste your code in the text field, then click the Create This Page Element at the bottom.