Changing the style of an element in response to a timer can animate text. Scripts can modify one or more styles on every signal from a timer. The following two examples demonstrate changing the appearance of an element over time. These examples can be modified to change any CSS property of the element.
Modifying a document's appearance using a timer is useful for drawing attention to information on the document. The technique can be used in lieu of using large animated GIFs; animating text with a few lines of script always yields better performance than downloading GIFs that serve the same purpose.
As written, these samples will not work on down-level browsers, but you can easily add code to test what browser is running the page, and start and stop the timer only if the browser is Internet Explorer 4.0.
Elastic Text
The following simple demonstration changes the CSS letter-spacing property of an element in response to a timer. This technique can be used to add an interesting effect to headers or other contents.
<HTML>
<HEAD>
<TITLE>Elastic Text</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// Array of sizes to cycle over
var sizes = new Array("0px", "1px", "2px", "4px", "8px");
sizes.pos = 0;
function rubberBand() {
var el = document.all.elastic;
if (null == el.direction)
el.direction = 1;
else if ((sizes.pos > sizes.length - 2) ||
(0 == sizes.pos))
el.direction *= -1;
el.style.letterSpacing = sizes[sizes.pos += el.direction];
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="window.tm = setInterval(`rubberBand()', 100);"
ONUNLOAD="clearInterval(window.tm);">
<H1 ID="elastic" ALIGN="Center">This Is Elastic Text</H1>
</BODY>
</HTML>
Pulsating Elements
The following code extends the previous example by modifying multiple elements on each tick of the timer and by using a new class to specify the alternative style:
<HTML>
<HEAD>
<TITLE>Pulsating Buttons</TITLE>
<STYLE TYPE="text/css">
.pulsate {letter-spacing:2; font-weight:bolder; color:blue}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function pulsate() {
// Get all elements with the "pulsate" name or ID.
var pEl = document.all.pulsate;
if (null == pEl.length) // Only one element
pEl.className = pEl.className == "pulsate" ?
"" : "pulsate";
else // Iterate over all pulsate elements.
for (var i = 0; i < pEl.length; i++)
with (pEl[i])
className = className == "pulsate" ?
"" : "pulsate";
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="window.tm = setInterval(`pulsate()', 1500);"
ONUNLOAD="clearInterval(window.tm);">
<INPUT TYPE=BUTTON NAME="pulsate" VALUE="Click Me!">
<INPUT TYPE=BUTTON NAME="pulsate" VALUE="Click Me Too!">
</BODY>
</HTML>