Elastic Text

Expanding and contracting text is almost certain to grab attention. Wow, can it ever! Implement it only after adequate consideration.

Two things are required to implement elastic text.

1. A div with the text to elasticize.

2. JavaScript to give the text its elasticity.

Expansion and contraction is accomplished by increasing and decreasing the the space between letters.

I'll provide two examples first, with the source code of their respective divs. Last, I'll provide the JavaScript.

Each example has four different expansion/contraction speeds. The lower the number, the faster the animation.

Below are links to reveal the four speeds of first example.

[1000]   [500]   [100]   [1]   —   [Hide Elastic Text]

As you see, it has a high potential of being distractive. Use it with caution, care, and consideration.

Here is the source code of the div for the above example.

<div id="elastictext"
   style="
      border:1px solid black;
      font-size:12px;
      padding:5px;
      text-align:center;
      overflow:hidden;
      white-space:nowrap;">
<a href="//www.willmaster.com/software/cam/">
Carefree Ad Manager
</a>
</div>

The id is required. Whatever id value you decide for the div, the value needs to be specified in the JavaScript. (I'll talk about the JavaScript after the second example.)

None of the inline CSS style definitions in the above example div are required.

Here is the second example, an animated arrow created from text characters. As before, click to reveal and hide the example.

[500]   [100]   [50]   [1]   —   [Hide Elastic Text]

And here is the second example's div source code.

<div id="arrowtext">
~~~~~~&gt;
</div>

The div for the second example has no CSS styling. CSS could be used to style the arrow a bit. Perhaps make it a different or lighter color, or change it's size.

The JavaScript

The JavaScript is the most important part of the implementation. So long as the div for the elastic text has an id value, JavaScript takes care of elasticizing the text.

Put the JavaScript somewhere below the div with the elastic text.

<script type="text/javascript">
/* 
   Elastic Text
   Version 1.0
   July 18, 2011

   Will Bontrager
   https://www.willmaster.com/
   Copyright 2011 Will Bontrager Software, LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software, LLC grants 
   you a royalty free license to use or 
   modify this software provided this 
   notice appears on all copies. 
*/
//////////////////////////////////////////////////////
//
// Five places to customize:

// Place one --
// Specify the id value of the div containing the elastic text.

var ElasticSpacingID = "elastictext";

// Places two and three --
// Specify a number of pixels for the maximum and minimum 
//    amount of spacing between letters.

var MaximumLetterSpacing = 7;
var MinimumLetterSpacing = -1;

// Place four --
// Specify how fast the text shall expand and contract.
//    Lower numbers are faster, up to computer's capability.

var ElasticAdjustmentSpeed = 111; 

// Place five --
// Specify the number of seconds the elasticity is to animate before 
//    it stops. Use 0 (zero) for continuous animation.

var StopPointSeconds = 0;

// No other customization required in this JavaScript.
//////////////////////////////////////////////////////

var AdjustmentDirection = +1;
var ElasticSpacingDiv = document.getElementById(ElasticSpacingID);
var CurrentSpacing = ElasticSpacingDiv.style.letterSpacing;
if( ! CurrentSpacing.length ) { CurrentSpacing = 0; }
CurrentSpacing = parseInt(CurrentSpacing);
var ElasticityInterval;

function AdjustLetterSpacing() {
if( CurrentSpacing >= MaximumLetterSpacing ) { AdjustmentDirection = -1; }
else if( CurrentSpacing <= MinimumLetterSpacing ) { AdjustmentDirection = +1; }
CurrentSpacing += AdjustmentDirection;
ElasticSpacingDiv.style.letterSpacing = CurrentSpacing + "px";
}

function StopAnimation() { clearInterval(ElasticityInterval); }

ElasticityInterval = setInterval("AdjustLetterSpacing()",ElasticAdjustmentSpeed);

if( StopPointSeconds > 0 ) { setTimeout("StopAnimation()",parseInt(StopPointSeconds*1000)); }
</script>

The JavaScript has 5 places to customize, the places marked in the source code.

1. The div ID value –

   Variable ElasticSpacingID

   Specify the id value of the div containing the text to elasticize.

2. Maximum stretch –

   Variable MaximumLetterSpacing

   Specify the maximum number of pixels between letters of the text. The text will expand to that point.

3. Full contraction –

   Variable MinimumLetterSpacing

   Specify the minimum number of pixels between letters of the text. The text will contract to that point.

   The number specified here may be negative. (The second example in this article (animated arrow) has a MinimumLetterSpacing value of -4.)

4. Speed –

   Variable ElasticAdjustmentSpeed

   How fast shall the expansion and contraction take place? The smaller the number specified here, the faster the animation.

   (What you are actually specifying here is the number of milliseconds to pause between each expansion and contraction operation. Thus, the smaller the number, the faster the animation.)

   On some computers, the fastest is 0. On others, the fastest is some larger number. It depends on the computer's processor speed and how busy it is.

   The fastest speed that can be accomplished is 0. A negative number won't make the animation go any faster.

5. Halt –

   Variable StopPointSeconds

   To stop the expansion/contraction animation at some point after the animation has started, specify the number of sections here.

   For perpetual animation, specify 0.

Text can have the appearance of elasticity. Its expansion and contraction is accomplished by opening and closing the space between the letters of the text.

As stated earlier, elastic text can be a distraction. Still, it may be appropriate in certain circumstances.

Will Bontrager