DISASSEMBLING THE DYNAMIC
TEXT SHOTS
Copyright (C) 1997,
Taboca Illusionary Team
illusionary@taboca.com
The follow HTML source code can be included in your web page to provide the "text shot" effect. Drag and drop this code and test it now! The javascript function start is the starting point to the animation. To customize the effect set the q variable to your customized text . Also remember to set the strsize global variable to the size of your q string.
If you want to change the text position, replace the left and top attributes of all layers with your desired value.
<BODY TEXT="#000000" BGCOLOR="#000000" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000" onload="start();"> <layer name="canvas0" top=0 left=0 width="100%" height="300"> </layer> <layer name="canvas1" top=0 left=0 width="100%" height="300"> </layer> <layer name="canvas2" top=0 left=0 width="100%" height="300"> </layer> <layer name="canvas3" top=0 left=0 width="100%" height="300"> </layer> <layer name="canvas4" top=0 left=0 width="100%" height="300"> </layer> <layer name="canvas5" top=0 left=0 width="100%" height="300"> </layer> <layer name="canvas6" top=0 left=0 width="100%" height="300"> </layer>
<script>
var strsize; // q string size, customize it.
function start() {
q="Taboca Illusionary web team!"; // q string, customize it.
strsize=28;
generate_char(q);
}
function generate_char(cc) {
document.layers['canvas0'].document.open('text/html');
j=0; eend=strsize;
for(i=0;i<eend;i++) {
dd=cc.charAt(i);
document.layers['canvas0'].document.write('<ilayer visibility="hide" name="c'+j+'b'+i+'"><font color="#ffffff" point-size="'+(j+2)+'0pt">'+dd+'</font></ilayer>');
}
document.layers['canvas0'].document.close();
create_the_rest(cc);
}
function create_the_rest(cc) {
eend=strsize;
for(j=1;j<6;j++) {
document.layers["canvas"+j].document.open('text/html');
for(i=0;i<eend;i++) {
dd=cc.charAt(i);
tt=document.layers['canvas0'].document.layers['c'+0+'b'+i].top;
ll=document.layers['canvas0'].document.layers['c'+0+'b'+i].pageX;
if(j==5) colortext="#151515";
if(j==4) colortext="#555555";
if(j==3) colortext="#888888";
if(j==2) colortext="#bbbbbb";
if(j==1) colortext="#ffffff";
document.layers['canvas'+j].document.write('<layer visibility="hide" name="c0b'+i+'" top="'+tt+'" left="'+ll+'"><font color="'+colortext+'" point-size="'+(j*2)+'0pt">'+dd+'</font></layer>');
}
document.layers["canvas"+j].document.close();
}
shotthem();
}
jcounter=5;
icounter=0;
var lastlayer;
function shotthem() {
document.layers["canvas"+jcounter].document.layers["c0b"+icounter].visibility="show";
if(jcounter==5&&icounter==0) {
} else {
if(jcounter!=5) lastlayer.visibility="hide";
}
lastlayer=document.layers["canvas"+jcounter].document.layers["c0b"+icounter];
jcounter--;
if(jcounter==0) {
jcounter=5;
icounter++;
}
if(icounter<strsize) {
setTimeout("shotthem()",20);
}
}
</script>
Back to the Illusionary Factory go to Taboca ArtworK Space