Inside Technique : Elastic Text
By Scott Isaacs

Elastic Text Bounces

This is a variation of the expanding text example. In this example, the text contained within the element with the ID of "elastic" continually expands and contracts. On this page, the header "Elastic Text" is contained within an H3 with the appropriate ID:

<H4 ID=elastic>Elastic Text Bounces</H4>

Description

Any single element can have the ID of "elastic". Once the page is loaded, the letter-spacing defined by the in-line style for this element is dynamically modified to increment and decrement through the values specified by an array, sizes:

var sizes = new Array("0px", "1px", "2px", "4px", "8px");

The values in this array can be modified to change the effect and more or less values can be specified. Code

  // Array of sizes to cycle between
     var sizes = new Array("0px", "1px", "2px", "4px", "8px","16px");
     sizes.pos = 0;

     function rubberBand() {
        var el = document.all.elastic;
        if (null == el.direction)
           el.direction = 1;  // switch directions
         else if ((sizes.pos > sizes.length - 2) ||
                    (0 == sizes.pos))
           el.direction *= -1;
        el.style.letterSpacing = sizes[sizes.pos += el.direction];
     }
     window.onload = new Function("window.tm = setInterval('rubberBand()', 100);")
     window.onunload = new Function("clearInterval(window.tm)")

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.