3D Dynamic Text Twister

Joe McCormack Nov 12, 2003

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 obt

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

The JavaScript Source: Text Effects: 3D Dynamic Text Twister

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- TWO STEPS TO INSTALL 3D DYNAMIC TEXT TWISTER:

1.  Copy the coding into the HEAD of your HTML document

2.  Add the last code into the BODY of your HTML document  -->

<HEAD>

<!--

http://www.geocities.com/code_stratos/

//-->

</script>

<!--

http://www.geocities.com/code_stratos/

//-->

</script>

<!--

http://www.geocities.com/code_stratos/

- Created to show that this page effect is an editor's pick at scriptsearch.com

var browserwidth = 0;

function kudos() {

browserwidth = document.body.clientWidth;

// Specify position of 'picked'

picked.style.left = browserwidth - 300;

picked.style.top = 5;

// Build the blurb content

picked.innerHTML = "<table border=\"1\" bordercolor=\"#A49806\" cellpadding=\"5\" cellspacing=\"0\" width=\"300\" bgcolor=\"#FCF5AD\"><tr><td width=\"100%\" valign=\"center\"><div align=\"center\"><font face=\"trebuchet ms, arial\" size=\"2\" color=\"#A49806\"><b>Free</b> scripts from the <a href=\"http://www.javascript.internet.com\" target=\"new\">JavaScriptSource.com</a>.</font></div></td></tr></table>";

}

//-->

</script>

</HEAD>

<BODY>

<font size=+2><b>:: 3D Dynamic Text Twister</b></font>  Author Joe McCormack<br /><br />

<b><u>Basic Text Usage With/Without Mouse Alignment:</u></b>

<a href="" onmouseover="ontwist('PHAT ','red','maroon','trebuchet ms','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 1</a> - Uses a fixed position to render message<br />

<a href="" onmouseover="ontwist('MOUSE','blue','navy','georgia','bold',8,100,0,500,20,50,'true');" onmouseout="offtwist();">Example # 2</a> - Uses the mouse position to render message<br /><br />

<b><u>Single Character Examples To Give Ideas On Use (webdings font):</u></b>

<a href="" onmouseover="ontwist('x','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 3</a> - 'NO' sign<br />

<a href="" onmouseover="ontwist('a','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 4</a> - check sign<br />

<a href="" onmouseover="ontwist('b','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 5</a> - bicycle sign<br />

<a href="" onmouseover="ontwist('d','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 6</a> - shield sign<br />

<a href="" onmouseover="ontwist('e','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 7</a> - gift box sign<br />

<a href="" onmouseover="ontwist('f','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 8</a> - fire truck sign<br />

<a href="" onmouseover="ontwist('h','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 9</a> - ambulance sign<br />

<a href="" onmouseover="ontwist('j','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 10</a> - airplane sign<br />

<a href="" onmouseover="ontwist('k','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 11</a> - space satellite sign<br />

<a href="" onmouseover="ontwist('o','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 12</a> - boat sign<br />

<a href="" onmouseover="ontwist('p','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 13</a> - police car sign<br />

<a href="" onmouseover="ontwist('s','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 14</a> - question mark sign<br />

<a href="" onmouseover="ontwist('w','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 15</a> - golf flag sign<br />

<a href="" onmouseover="ontwist('C','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 16</a> - city sign<br />

<a href="" onmouseover="ontwist('E','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 17</a> - desert sign<br />

<a href="" onmouseover="ontwist('N','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 18</a> - eye sign<br />

<a href="" onmouseover="ontwist('Y','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 19</a> - heart sign<br />

<a href="" onmouseover="ontwist('Q','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 20</a> - camping sign<br />

<a href="" onmouseover="ontwist('!','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 21</a> - spider sign<br />

<a href="" onmouseover="ontwist('@','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 22</a> - hammer and wrench sign<br />

<a href="" onmouseover="ontwist('$','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 23</a> - sunglasses sign<br />

<a href="" onmouseover="ontwist('%','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 24</a> - trophy sign<br />

</td>

<b><u>Multiple Character Examples To Give Ideas On Use (webdings font):</u></b>

<a href="" onmouseover="ontwist('Q$E','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 25</a> - camping sign, sunglasses sign, desert sign<br />

<a href="" onmouseover="ontwist('xjC','red','maroon','webdings','bold',8,100,0,500,20,20,'false');" onmouseout="offtwist();">Example # 26</a> - 'NO' sign, airplane sign, city sign<br />

</td></tr></table>

<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>

by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

3D Dynamic Text Twister

Leave a Response

Attention JavaScript Coders

Go Deeper