Marathia’s Stacks

stacks for the rest of us

stacks for the rest of us

Stacks Image 91039
Stacks Image 91126

Marquee! Stack

Mimic the old school <marquee> element with CSS3

As the old-timers among us may remember, the <blink> and <marquee> elements were very popular in the nineties to spice up your home page. Many of those home pages were on Geocities, a very popular web hosting service back then. Personal home pages often looked something like this (OK, my nostalgia may make me exaggerate a little).
Here’s what Wikipedia says about the <blink> element:
Despite its initial popularity among home users in the 1990s, it has since fallen out of favor due to its overuse and the difficulty it presents in reading. The tag achieved notoriety for being user-unfriendly in the opinion of many designers. Lou Montulli, often credited as the inventor of the blink element, has said that he considers "the blink tag to be the worst thing I've ever done for the Internet" […]. (source)

And about the <marquee> element:
The marquee tag is a non-standard HTML element which […] was first introduced in early versions of Microsoft's Internet Explorer, and was compared to Netscape's blink element, as a proprietary non-standard extension to the HTML standard with usability problems. The W3C advises against its use in HTML documents. […] Marquee can be distracting.The human eye is attracted to movement, and marquee text is constantly moving. (source)

TL;DR: both elements are now obsolete and their use is not advised.
Calling these elements user-unfriendly and distracting is a little oversimplified to my taste. There’s a reason CSS3 animations and keyframes are becoming more and more popular (see my Morphext and Morphist Stacks for example)! As long as they are used in moderation, they can do just what the W3C considers undesirable: attract the human eye, thus emphasizing elements on a page (a time limited offer for example).

And what about vintage design? I have a nostalgic mind, so I enjoy retro elements in a design, and I’m sure I’m not alone in this.

Reason enough to bring back the <blink> and <marquee> elements for RapidWeaver users – with stacks that use the latest technology (CSS3 animations and keyframes).

Demo
See above, next to the icons; and below, under Usage. And: in case you missed it, the ‘Geocities’ page shows an abundant use of both stacks.

Usage
Blink! stack:
Drag any stack that can contain text (or HTML) into the dropzone of the stack.
Mark the text you want to blink with underline (Format > Underline, cmd-U or manually with <u>…</u>).
By default, the underlining will be removed. Use the option remove underlining to prevent this.
Marquee! stack:
Use only a single line of text (if desired with links) inside this stack; no images, no line breaks.
Style the text as you like, but center or right alignment will be ignored.
When using a link in the scrolling text, using the option pause on hover may be a good idea.
Both:

Need help using one of these stacks on a non-stacks page? Here’s a tutorial.

Limitations
  • In Internet Explorer worse than version 10 there’s no blinking or scrolling.
  • The U.S. government (and others) recommend that Web pages avoid blinking images at between 2 hertz and 55 hertz to avoid triggering epileptic seizures among users (more info). Use the Blink! Stack at your own risk!
  • Especially with big text, the letters in the Marquee! Stack may appear a little shaky. CSS3 animations are not perfect (yet), so live with it…

Background
These stacks were mainly made for practicing CSS3 animations and keyframes.

Support
Please use this form to report all issues, questions and comments.

These stacks require RapidWeaver (version 7 or higher) and the Stacks plugin by YourHead (version 3.5 or higher).

Yes, this website uses cookies too. Here’s the annoying but obligatory cookie warning. More info…