:: 3D Dynamic Text Twister  Author Joe McCormack

Basic Text Usage With/Without Mouse Alignment:

Example # 1 - Uses a fixed position to render message
Example # 2 - Uses the mouse position to render message

Single Character Examples To Give Ideas On Use (webdings font):

Example # 3 - 'NO' sign
Example # 4 - check sign
Example # 5 - bicycle sign
Example # 6 - shield sign
Example # 7 - gift box sign
Example # 8 - fire truck sign
Example # 9 - ambulance sign
Example # 10 - airplane sign
Example # 11 - space satellite sign
Example # 12 - boat sign
Example # 13 - police car sign
Example # 14 - question mark sign
Example # 15 - golf flag sign
Example # 16 - city sign
Example # 17 - desert sign
Example # 18 - eye sign
Example # 19 - heart sign
Example # 20 - camping sign
Example # 21 - spider sign
Example # 22 - hammer and wrench sign
Example # 23 - sunglasses sign
Example # 24 - trophy sign
 Multiple Character Examples To Give Ideas On Use (webdings font):

Example # 25 - camping sign, sunglasses sign, desert sign
Example # 26 - 'NO' sign, airplane sign, city sign
How To Put The 3D Dynamic Text Twister On Your Webpages:

The 3D Dynamic Text Twister control was written to use the same code block for an unlimited number of calls within a web page and through an entire web site. This means that you only need to change parameters within the function parameters instead of having to change the source file...thus one source file and virtually unlimited ways to call it and obtain different effects. Some of the effects are demonstrated above. You will notice that all that was changed was the parameters in each link to obtain different effects.

In order to use the 3D Dynamic Text Twister control on your web site you need to follow these steps:

  1. Download the 3dtwister.js file into your computer. Usually you will want to place the control in the same folder as the web pages that will call it.
  2. Place the following javascript code between the <HEAD> and </HEAD> tags of your web page:
    <script language="javascript" src="3dtwister.js">
    <!--
    /*
      3D Dynamic Text Twister. Author Joe McCormack. Copyright 2003. All Rights Reserved.
      www.geocities.com/code_stratos/
    */
    //-->
    </script>
  3. Place the following div tag on your web page(s):
    <!-- Place the following tag on your web page between the opening and closing body tags -->
    <div id="vortex" style="position:absolute;"></div>
  4. Decide what effects, color, position, speed, text size, message and so on you want the effect to display.
  5. Decide how you want to impliment the effect. If you just want to use it once on a web page, you may wish to place it in the <body onload="ontwist(...);"> tag. See the code segment below for how to do this:
    <body onload="ontwist('HELLO ','red','maroon','trebuchet ms','bold',8,100,0,500,20,20,'false');">
  6. If you want to, instead, impliment the effect with mouseovers, see the example code block (for a link) shown below. Remember that each instance you want to have on your web page can be different...all you have to do is change the parameters of the ontwist(...) function.
    <a href="somelink.html" onmouseover="ontwist('PHAT','blue','navy','georgia','bold',8,100,0,500,20,50,'true');" onmouseout="offtwist();">Example Text Link One</a> :: Illustrates looping text message
  7. Reference the information below for what each parameter does.

3D DYNAMIC TEXT TWISTER PARAMETER SPECIFICS:

------------------
FUNCTIONS OVERVIEW:
Function: ontwist(a, b, c, d, e, f, g, h, i, j, k, l)
------------------
Function Parameters:
a = "HEY" Text message to have controlled by effect.
b = "red" Foreground color of text. Can be HEX.
c = "maroon" Background color of text. Can be HEX.
d = "trebuchet ms" Font family of text. More than one type can be specified.
e = "bold" Font weight. Can be "bold", "", "normal", etc.
f = 8 Minimum point font size.
g = 100 Minimum depth layer value.
h = 0 Pause interval between rotation events.
i = 500 X coordinate of top left of effect, if using FIXED position.
j = 20 Y coordinate of top left of effect, if using FIXED position.
k = 20 Y Offset from mouse position, if NOT using FIXED position.
l = "true" "true" = Show effect at mouse position. "false" = Show effect at fixed position specified by i, j.

Function: offtwist()
Function Parameters: None. This command stops the function and removes it from the web page.



1