Web Design, Development & Marketing

Web Development Articles

Javascript / CSS: Flashing Text - How to do it - Why NOT to do it

For some reason or another you may "need" to use flashing text on a web page. Whatever the reasons substantiating this "need", there are plenty of reasons opposing the use of effects such as flashing text.

Anyway, I'll proceed to outline a couple of ways you can implement this stunningly magical effect... then I'll proceed to explain why you shouldn't use it. Well, I'll try to explain at least.

The first way you can create flashing text is to use CSS:

<style>
  text-decoration: blink;
</style>

<span id="flash">Blinking Text</span>


Unfortunately, this feature is not supported in Internet Explorer. It also lacks any real flexibility in controlling the style of flashing. Back to the drawing board!

Time for some lovely JavaScript...

<body onload="changeColour('flashtext');">

<script type="text/javascript">
<!--
function changeColour(elementId) {
    var interval = 1000;
    var colour1 = "#ff0000"
    var colour2 = "#000000";
    if (document.getElementById) {
        var element = document.getElementById(elementId);
        element.style.color = (element.style.color == colour1) ? colour2 : colour1;
        setTimeout("changeColour('" + elementId + "')", interval);
    }
}
//-->
</script>

<p id="flashtext">This text will flash!!!</p>


Ok so now we can get text to flash. Hoorah! Now we need to address the concern of usability. Website usability is a typically qualitative factor and therefore cannot be "measured" very easily.

Even so, there are guidelines we can adhere to. Overloading a user's screen with unnecessarily distracting animations is a big no-no as I'm sure we're all aware. How about discreet use of flashing text? Well, it can be useful. Certain circumstances may warrant, or even necessitate, flashing text. (None come to mind at the time of writing this but feel free to let me know if you think of any particular circumstances)

Think, though, of all the alternative ways of highlighting text and objects within an HTML page. Think about the myriads of ways that CSS can enable us to define different styles for elements in an aesthetically pleasing manner. Is there really a need for flashing text? It may prove to be a most unwelcome distraction on pages where users are trying to read around the flashing text.

So in conclusion, use it if you must... but I wouldn't recommend it :-)

Subscribe to RSS Feed Bookmark and Share

Related Links

Related Articles / Posts

Photoshop to Valid XHTML/CSS Coding Service (30/03/2009)

Recent Recommended Links - April 2008 (11/04/2008)

Recent Recommended Links - March 2008 (16/03/2008)

Cascading Style Sheets (CSS) - 10 Years of Styling Web Pages (02/01/2007)

CSS Layouts Without Tables - Tableless Design (Article) (07/11/2006)