Text Animation Techniques
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>
[Содержание]
|
