Blinking text in Javascript

A small script to make text blink or change appearance.

The <blink> tag is no longer supported by modern browsers. However, there may still be usage situations where a blinking text can be put to good use, ie. in messaging, chat, gaming, ...

The blink() javascript function is an improved version of the <blink> tag. It is possible to limit the number of blinks, as well as to customize the way the text looks when it blinks.

Demo

(refresh the page to re-start the blink sequence)

Lorem ipsum dolor sit amet consectetuer adipiscing elit. Nunc a augue sed ligula tempor facilisis. Curabitur in elit. Etiam dolor wisi, consequat eget, accumsan eu, dignissim nec, est.

Usage

Use sparingly! This is intended for special occasions where an extreme emphasis would benefit the user. It is not intended to annoy the user, but this will be the case unless you use this script with caution. If in doubt, don't use it.

Basic use

First, copy the text from the "Source code" section below into the <head> section of a html page.

Second, put a <span> tag around the text that you want to blink, giving it a unique ID. Example (the ID is "test1"):

<span id="test1">Curabitur in elit.</span>

Third, insert this code somewhere below the 'blink' text, making sure that the ID in the parenthesis is the same as the ID of the <span> above:

<script type="text/javascript">blink('test1');</script>

That's all.

Verbose instructions

The script has two settings to tweak:

The b_max is the maximum number of "on/off"-events. The maximum number of blinks will be around half this value, as a blink is = 1 "toggle off" + 1 "toggle on".

An even number will make the blink sequence end in "off", which is normal text. An odd number will make the blink sequence end in "on" which is changed text.

The b_rate is the blink rate: A low number means fast blinks, and a high number means slow blinks. The number 1000 gives around one blink per second.

Text formatting

Text formatting is controlled via standard Javascript CSS statements inside the blink() function. Three examples are given:

The "off" state The "on" state
lmnt.style.visibility="visible"; lmnt.style.visibility="hidden";
lmnt.style.fontWeight="normal"; lmnt.style.fontWeight="bold";
lmnt.style.color="inherit"; lmnt.style.color="#FF3300";

The "visibility" style is the traditional blink: text disappears from the screen and re-appears. This style is disabled in the demo as hiding the text would mean that the colour and font weight settings would be invisible. So, if you enable the "visibility" styles the other styles may have little effect.

Feel free to experiment.

Extensions

It is possible to extend the script so that it will take effect whereever you use the <blink> non-standard html tag in your document. This is left as an exercise for the reader.

Source code

Version and License

Version and License

Version

Current version: 1

License

What? Free!