Sunday, October 19, 2014
Fader Stills Show
Blog Entry #338
We continue today our deconstruction of the Java Goodies Text Fader 1.3 script. Having slogged through the script's fadeText( ) and changeColor( ) functions in the last two entries, we're ready to see how the first four fadeText( ) function calls play out from start to finish.
Recap
The first fadeText( ) call
fadeText("fadeMe01", "<span class='content'><b><a href='mailto:agent_teg@ThePentagon.com?subject=Text%20Fader%201.3'>Teg WoRKz</a></b> Interactive</span><div class='small'>proudly presents</div>", "000000", "CCCCCC", 10, 2);• The step gradient is 2.
• The smallest color distance is 204.
• After division by smallest, multiplication by step, and sign-adjustment as necessary ("processing" hereafter), the s1/s2/s3 increments are all 2.
• The changeColor( ) loop runs for smallest = 102 iterations.
• The tempR/tempG/tempB color components all max out at 204.
• The changeColor( ) loop takes the str text color from rgb(0, 0, 0) (#000000) to rgb(204, 204, 204) (#CCCCCC).
Teg WoRKz Interactive
proudly presents
(Don't know 'bout you, but a 6pt font-size is too small for my taste.)
The second fadeText( ) call
window.setTimeout(function ( ) { fadeText("fadeMe01", "<span class='content'><b>Teg WoRKz</b> Interactive</span><div class='small'>proudly presents</div>", "CCCCCC", "000000", 10, 4); }, 8000);• The step gradient is 4 ⇒ this fade'll be twice as fast as the first one.
• The smallest color distance is again 204.
• After processing, the s1/s2/s3 increments are all -4.
• The changeColor( ) loop runs for smallest = 51 iterations.
• The tempR/tempG/tempB components all bottom out at 0 and are unnecessarily reset to 0.
• The changeColor( ) loop takes the str text color from rgb(204, 204, 204) (#CCCCCC) to rgb(0, 0, 0) (#000000).
The third fadeText( ) call
window.setTimeout(function ( ) { fadeText("fadeMe01", "<div class='small'>A</div><span class='content'><b>Teg WoRKz</b> Production</span>", "000000", "CCCCFF", 10, 2); }, 12000);• The step gradient is 2.
• The smallest color distance is 255, for a maximal b1 → b2 change.
• After processing, the s1 and s2 increments are 1.6 and the s3 increment is 2.
• The changeColor( ) loop runs for smallest = 128 iterations.
• The tempR and tempG components max out at 205 (Math.round(1.6 × smallest)); the tempB component maxes out at 256 (2 × smallest) and is adjusted to 255.
• The changeColor( ) loop takes the str text color from rgb(0, 0, 0) (#000000) to rgb(205, 205, 255) (#CDCDFF) - slightly off from the target, but close enough.
A
Teg WoRKz ProductionThe fourth fadeText( ) call
window.setTimeout(function ( ) { fadeText("fadeMe01", "<div class='small'>A</div><span class='content'><b><a href='mailto:agent_teg@ThePentagon.com?subject=Text%20Fader%201.3'>Teg WoRKz</a></b> Production</span>", "CCCCFF", "000000", 10, 4); }, 20000);• The step gradient is 4.
• The smallest color distance is again 255.
• After processing, the s1 and s2 increments are -3.2 and the s3 increment is -4.
• The changeColor( ) loop runs for smallest = 64 iterations.
• The tempR and tempG components bottom out at -1 (Math.round(204 + (-3.2 × smallest))) and are adjusted to 0; the tempB component bottoms out at -1 (255 + (-4 × smallest)) and is adjusted to 0 as well.
• The changeColor( ) loop takes the str text color from rgb(204, 204, 255) (#CCCCFF) to rgb(0, 0, 0) (#000000).
(I don't need to show you another solid black rectangle, do I? Didn't think so.)
The rest of the movie
At this point we've gone through about a third of the layout( ) function whose call starts the Text Fader 1.3 movie. Let's keep going, shall we?
Recall that the fadeMe01 div was initially given a window.innerHeight ÷ 2 - 50 top offset. After the fourth fadeText( ) call, the fadeMe01 div is shifted upward by 50px and the fadeMe02 div is positioned 10px higher than the initial fadeMe01 div position.
window.setTimeout(function ( ) { moveLayer("fadeMe01", midY - 100, midX - 200); }, 24000);
window.setTimeout(function ( ) { moveLayer("fadeMe02", midY - 60, midX - 200); }, 24000);The fadeMe01 div still holds the fourth fadeText( ) call's str string
A
Teg WoRKz Productionalthough you can't see it against the black background; the fadeMe02 div is empty.
The fadeMe01 div is subsequently charged with a TeXT FaDeR 1.3 string that (in practice) fades from black to #CDCDFF.
window.setTimeout(function ( ) { fadeText("fadeMe01", "<span class='content'><b>TeXT FaDeR 1.3</b></span>", "000000", "CCCCFF", 10, 4); }, 26000);TeXT FaDeR 1.3
The fadeMe02 div is charged with a THe ReWRiTTeN VeRSioN string that fades from black to #9A9AFF.
window.setTimeout(function ( ) { fadeText("fadeMe02", "<span class='content'>THe ReWRiTTeN VeRSioN</span>", "000000", "9999FF", 10, 4); }, 32000);THe ReWRiTTeN VeRSioN
The TeXT FaDeR 1.3 string in the fadeMe01 div is faded to red.
window.setTimeout(function ( ) { fadeText("fadeMe01", "<span class='content'><b>TeXT FaDeR 1.3</b></span>", "CCCCFF", "FF0000", 10, 4); }, 36000);TeXT FaDeR 1.3
The THe ReWRiTTeN VeRSioN string in the fadeMe02 div is faded to #99FF33
window.setTimeout(function ( ) { fadeText("fadeMe02", "<span class='content'>THe ReWRiTTeN VeRSioN</span>", "9999FF", "99FF33", 10, 4); }, 40000);THe ReWRiTTeN VeRSioN
and then to #CCCCCB
window.setTimeout(function ( ) { fadeText("fadeMe02", "<span class='content'>THe ReWRiTTeN VeRSioN</span>", "99FF33", "CCCCCC", 10, 4); }, 44000);THe ReWRiTTeN VeRSioN
and then to black.
window.setTimeout(function ( ) { fadeText("fadeMe02", "<span class='content'>THe ReWRiTTeN VeRSioN</span>", "CCCCCC", "000000", 10, 4); }, 48000);BTW, the #CCCCFF, #9999FF, and #CCCCCC colors are known as periwinkle, rich periwinkle, and gray80, respectively. The #99FF33 color doesn't have a name AFAIK.
Two more 'scenes' to go. The THe ReWRiTTeN VeRSioN string in the fadeMe02 div is replaced by a readme-type string that fades from black to gray80.
window.setTimeout(function ( ) { fadeText("fadeMe02", "<span class='small'>This script is provided as if without support or warranty of any kind. I will not be held liable by any damage that this script might cause. COPYRIGHT<sup>©</sup> 1998. <a href='mailto:agent_teg@ThePentagon.com?subject=Text%20Fader%201.3'>Teg Workz</a></span><div class='small'>Open this page with a text editor to view the syntax command.</div>", "000000", "CCCCCC", 10, 4); }, 52000);CSS note: The
.small style rule features width and text-align settings that ordinarily do not apply to a span element. Alternatively and preferably, we can pre-format the entire readme string with a single <div class='small'></div> container and use a <br> to push the last sentence to a new line.This script is provided as if without support or warranty of any kind. I will not be held liable by any damage that this script might cause. COPYRIGHT© 1998. Teg Workz
Open this page with a text editor to view the syntax command.
Open this page with a text editor to view the syntax command.
Finally, the TeXT FaDeR 1.3 string in the fadeMe01 div is replaced by a The - End!!! string that fades from black to red.
window.setTimeout(function ( ) { fadeText("fadeMe01", "<span class='content'><b>The</b> - <b>End</b>!!!</div>", "000000", "FF0000", 10, 4); }, 57500);Note that the str string has a
<span>/</div> tag mismatch - I'd make it a div vis-à-vis a span as it has no flanking content.The - End!!!
We will conclude our Text Fader 1.3 script discussion with one last post in which we clean up the code some more and provide a demo.
- posted by A. Peak @ 2:09 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)