<div class="pageFrame">
<div class="pageInfo" style="display:none;">
<h2>Information About This Crazy Page:</h2>
<div class="pageInfoPort">This page is a crazy experiment where I want
to break of the words in a paragraph into<br>
separate <b><span></b> blocks for each letter.
And, have each letter absolutely positioned so that<br>
the letters appear on the page just as if these span blocks
did <i>not</i> exist!<br> <br>
Why? I have this nutzo idea of making it so that by using
CSS Animation,
<br>I can have letters flying in from who-knows-where...
and come together to form nice looking paragraphs!<br> <br>
Or, the other way around, the letters in the sentences of
the paragraphs could be animated <br>to break apart and
swirl away possibly in some interesting patterns!<br> <br>
Well, the part to split the paragraphs into spans seems to
be working okay.
<br> <br><b>WOOT!!</b><br>
I got a basic fly-in and fly-out animation working! <br>
That worked out much better than I expected it would!
<br><br>
Clicking the Fly-In and Fly-Out buttons will show you
the animations for those things.
<br><br>
Clicking the Auto Play ON button will cause the
animations to play over and over again automatically
(until you click the button again)!
</div>
<div class="footerInfo">
<hr>
<center>
<button onclick="hideInfo()">Close Info Panel</button>
</center>
</div><!-- footerInfo -->
</div><!-- pageInfo -->
<div class="pageInfoSpacer">.</div>
<span id="runningAnimations"><b>Running Animation</b></span>
<button onclick="flyInStart()" id="btnFlyIn" style="display:none;">Animate Fly-In of David Cooperfield Text</button>
<button onclick="flyOutStart()" id="btnFlyOut">Animate Fly-Out of David Cooperfield Text</button>
<button id="btnAutoPlay" onclick="toggleAutoPlay()">Turn Auto Play ON</button>
<div class="pageContent">
<p>Whether I shall turn out to be the hero of my own life, or whether that station will be held by anybody else, these pages must show. To begin my life with the beginning of my life, I record that I was born (as I have been informed and believe) on a Friday, at twelve o’clock at night. It was remarked that the clock began to strike, and I began to cry, simultaneously.</p>
<p>In consideration of the day and hour of my birth, it was declared by the nurse, and by some sage women in the neighbourhood who had taken a lively interest in me several months before there was any possibility of our becoming personally acquainted, first, that I was destined to be unlucky in life; and secondly, that I was privileged to see ghosts and spirits; both these gifts inevitably attaching, as they believed, to all unlucky infants of either gender, born towards the small hours on a Friday night.</p>
<p>I need say nothing here, on the first head, because nothing can show better than my history whether that prediction was verified or falsified by the result. On the second branch of the question, I will only remark, that unless I ran through that part of my inheritance while I was still a baby, I have not come into it yet. But I do not at all complain of having been kept out of this property; and if anybody else should be in the present enjoyment of it, he is heartily welcome to keep it.</p>
</div>
<div id="outputTitle">Markup Generated By prepPage() JavaScript function:</div>
<textarea id="markupOutput" rows="18" cols="100"></textarea>
<div style="position:absolute;left:70px;top:10px;">
Sample text derived from: <a href="http://www.gutenberg.org/files/766/766-h/766-h.htm">David Copperfield Gutenberg.org Text</a><br>
<span class="specialLink" onclick="showInfo()">Click Here</span> for more information.
</div>
</div><!-- pageFrame-->
<style id="dynamicAnimatedCss_keyframes">
</style>
<style id="dynamicAnimatedCss">
</style>
!
