Gathering Text Library Demo

Paste the following into your URL bar to run demo:

data:text/html,<style> table{ border:1px solid black; padding-top:10px; padding-bottom:10px; padding-left:20px; padding-right:20px; } td{ border-left:1px solid black; border-right:1px solid black; padding-top:10px; padding-bottom:10px; padding-left:20px; padding-right:20px; } span{ color:green; } </style> <br><center><img width="647" height="13" title="" alt="" src="data:image/png;base64,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" /> </center><br> <script> </script> <table> <tr> <th>Name</th> <td><span>StartPoint</span></td> <td><span>Value</span></td> <td><span>FontColor</span></td> <td><span>ShadowColor</span></td> <td><span>BgColor</span></td> <td><span>Duration</span></td> <td><span>DestroyTime</span></td> </tr> <tr> <th>Type</th> <td>String</td> <td>String</td> <td>String</td> <td>String</td> <td>String</td> <td>Integer (seconds)</td> <td>Integer (milliseconds)</td> </tr> <tr> <th>Description</th> <td>Which side of the screen the text will come in from</td> <td>Text to be displayed (supports most html tags)</td> <td>Color of Text</td> <td>Background color of box surrounding text</td> <td>Background color of screen-overlay</td> <td>Duration of animation</td> <td>Amount of time before animation and overlay disappears (recommended 400ms above seconds value)</td> </tr> <tr> <th>Supported Values</th> <td>left, right, top, bottom, all, center</td> <td>Any string and most HTML tags</td> <td>Any CSS color value</td> <td>Any CSS color value</td> <td>Any CSS color value</td> <td>Any Integer</td> <td>Any Integer</td> </tr> </table> <br> <textarea rows="10" cols='90' id="text">gather('all', 'Mdbook', 'gray', 'lightblue', 'black', 3, 3400);</textarea><button onclick='eval(document.getElementById("text").value);'>Run</button><br> <h1>How do I add this to my webpage?</h1> Simply put <textarea rows=1 cols="90"><script src="http://mdbooktech.neocities.org/gatheringtext/GatheringText.js"></script></textarea> into your webpage, and then call the function! <script src="http://mdbooktech.neocities.org/gatheringtext/particletext.js"></script>