este codigo javascript muestra un pequeño texto que se desplaza verticalmente, con un efecto muy bien logrado.
<html>
<head>
<title>text animator javascript</title>
</head>
<script type="text/javascript">
<!-- hiding
/* script by lefteris haritou
copyright ©1997
http://www.geocities.com/~lef
this script is free as long
as you keep the above credit !
*/
/*
script por lefteris haritou
derechos reservados ©1997
http://www.geocities.com/~lef
este script es libre mientras
usted mantenga el crédito anterior
*/
bname=navigator.appname;
bversion=parseint(navigator.appversion)
if ((bname=="netscape" && bversion>=4) || (bname=="microsoft internet explorer" && bversion>=4)){
if (bname=="netscape")
brows=true
else
brows=false
var z=0;
var msg=0;
var rgb=0;
var message= new array();
var value=0;
var timer1;
var timer2;
var convert = new array()
var hexbase= new array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
// put here your own messages. add as many as you wan't (do not edit anything else in the script except the lines below)
var bgcolor="#ffffff"; //color of background
var color="#0000ff"; //color of the letters
message[0]='textanimator version 3.1'
message[1]='microsoft internet explorer 4 now supported !'
message[2]='this version does not support links for msie'
message[3]='netscape supports links as normal'
message[4]='damn microsoft.....'
message[5]='© 1997 lefteris haritou'
// put here your own messages. add as many as you wan't (do not edit anything else in the script except the lines above)
for (x=0; x<16; x++){
for (y=0; y<16; y++){
convert[value]= hexbase[x] + hexbase[y];
value++;
}
}
redx=color.substring(1,3);
greenx=color.substring(3,5);
bluex=color.substring(5,7);
hred=eval(parseint(redx,16));
hgreen=eval(parseint(greenx,16));
hblue=eval(parseint(bluex,16));
eredx=bgcolor.substring(1,3);
egreenx=bgcolor.substring(3,5);
ebluex=bgcolor.substring(5,7);
ered=eval(parseint(eredx,16));
egreen=eval(parseint(egreenx,16));
eblue=eval(parseint(ebluex,16));
red=ered;
green=egreen;
blue=eblue;
function start(){
if (brows)
res=document.layers['textanim'].top
else
res=textanim.style.top
timer1=window.setinterval('up()',1)
}
function stopf(){
window.clearinterval(timer1);
window.clearinterval(timer2);
for (x=0; x<2000; x++){}
}
function up(){
if (red<hred){
if ((red+15)<hred){
red+=15;
redx = convert[red]
}
else{
red=hred
redx = convert[red]
}
}
if (red>hred){
if ((red-15)>hred){
red-=15;
redx = convert[red]
}
else{
red=hred
redx = convert[red]
}
}
if (green<hgreen){
if ((green+15)<hgreen){
green+=15;
greenx = convert[green]
}
else{
green=hgreen
greenx = convert[green]
}
}
if (green>hgreen){
if ((green-15)>hgreen){
green-=15;
greenx = convert[green]
}
else{
green=hgreen
greenx = convert[green]
}
}
if (blue<hblue){
if ((blue+15)<hblue){
blue+=15;
bluex = convert[blue]
}
else{
blue=hblue
bluex = convert[blue]
}
}
if (blue>hblue){
if ((blue-15)>hblue){
blue-=15;
bluex = convert[blue]
}
else{
blue=hblue
bluex = convert[blue]
}
}
rgb = "#"+redx+greenx+bluex;
if (brows){
document.layers['textanim'].document.linkcolor=rgb;
document.layers['textanim'].document.vlinkcolor=rgb;
document.layers['textanim'].document.writeln('<pre><p class="main" align="center"><font color="'+rgb+'">'+message[msg]+'</font></p></pre>')
document.layers['textanim'].document.close();
}
else
textanim.innerhtml='<pre><p class="main" align="center"><font color="'+rgb+'">'+message[msg]+'</font></p></pre>'
if (z<19){
if (brows)
document.layers['textanim'].top-=2
else
textanim.style.postop-=2
z++
}
else
{
window.clearinterval(timer1);
timer2=window.setinterval('down()',1)
}
}
function down(){
if (red<ered){
if ((red+15)<ered){
red+=15;
redx = convert[red]
}
else{
red=ered
redx = convert[red]
}
}
if (red>ered){
if ((red-15)>ered){
red-=15;
redx = convert[red]
}
else{
red=ered
redx = convert[red]
}
}
if (green<egreen){
if ((green+15)<egreen){
green+=15;
greenx = convert[green]
}
else{
green=egreen
greenx = convert[green]
}
}
if (green>egreen){
if ((green-15)>egreen){
green-=15;
greenx = convert[green]
}
else{
green=egreen
greenx = convert[green]
}
}
if (blue<eblue){
if ((blue+15)<eblue){
blue+=15;
bluex = convert[blue]
}
else{
blue=eblue
bluex = convert[blue]
}
}
if (blue>eblue){
if ((blue-15)>eblue){
blue-=15;
bluex = convert[blue]
}
else{
blue=eblue
bluex = convert[blue]
}
}
rgb = "#"+redx+greenx+bluex;
if (brows){
document.layers['textanim'].document.linkcolor=rgb;
document.layers['textanim'].document.vlinkcolor=rgb;
document.layers['textanim'].document.writeln('<pre><p class="main" align="center"><font color="'+rgb+'">'+message[msg]+'</font></p></pre>')
document.layers['textanim'].document.close();
}
else
textanim.innerhtml='<pre><p class="main" align="center"><font color="'+rgb+'">'+message[msg]+'</font></p></pre>'
if (z<38){
if (brows)
document.layers['textanim'].top-=2
else
textanim.style.postop-=2
z++
}
else
{
if (brows){
document.layers['textanim'].document.writeln('')
document.layers['textanim'].document.close();
}
else
textanim.innerhtml='';
window.clearinterval(timer2);
if(msg<message.length-1){
msg++;
z=0;
if (brows)
document.layers['textanim'].top=res;
else
textanim.style.top=res;
window.settimeout('start()',100);
}
else
{
msg=0;
z=0;
if (brows)
document.layers['textanim'].top=res;
else
textanim.style.top=res;
window.settimeout('start()',2000);
}
}
}
}
// done hiding -->
</script>
<style type="text/css">
<!--
a:link {
text-decoration : none;
}
a:visited {
text-decoration : none;
}
p.main {
font-family : comic sans ms;
font-size : 16pt;
font-weight : bold;
}
-->
</style>
<body bgcolor="#ffffff" onload="start()">
<center><h2>text animator</h2>
autor:<a href="mailto:lef@writeme.com">lefteris haritou</a>...<br>
url:<a href="http://www.geocities.com/~lef" target="_new">http://www.geocities.com/~lef</a><br></center>
<center>
<div id="textanim" style="position: absolute; left: 4; top: 180">
</div>
<layer name="textanim" left=4 top=180>
</layer>
</center>
<br><br><br><br><br><br><center><h4>aclaración : los links solo son soportados en netscape 4</h4></center>
</body>
</html>
Download Script
Ver ejemplo javascript
