Include the TextEffect.class.js file in your document.
<script src="TextEffect.class.js"></script>
Create an element with some text in it and give it a unique ID attribute
<p id="testElement">Some sample text<p>
Create a new 'TextEffect' javascript object linked to the previously created element. Place this after the code created in Step 2.
<script>var teObject = new TextEffect("testElement");<script>
Call the desired effect from any JavaScript event, for example onClick event of a button.
<input type="button" onClick="teObject.disperse();" value="Disperse">You may specify additional options to control the speed, frames etc.
<input type="button" onClick="teObject.disperse( {steps: 10, stepDelay: 20, stepSize: 4} );" value="Disperse">The possible options are:
| steps: | Number of frames in animation sequence |
| stepDelay: | Time lapse in milliseconds between each frame |
| stepSize: | Number of pixels in distance to move a character in each frame |
| callback: | A javascript function to 'callback' once the effect is complete. This allows you to create a sequence of animation effects. |