Recursos Web Herramientas Tutoriales Programacion JavaScript

text multi-fx animacion script




este javascript muestra una pequeña animacion, en donde muestra un anillo de puntos que cambia de color y lugar dentro de la pantalla.

<html>
<title>text multi-fx</title>
<body bgcolor=000000>
<script type="text/javascript">
/*
multi fx
copyright kurt grigg (website.lineone.net/~kurt.grigg/javascript)
to add more shock to your site, visit www.dhtmlshock.com
*/
var colours=new array('ff0000','fff000','ff00ff','00ff00','ffffff','ffa000','0055ff');
var thingsinarray;
var step=0.4;
var a_step=0.1;
var runtime=0;
var currstep = 0;
var xpos = 0;
var ypos = 0;
var cntr=70;
var count_a=-1;
var move_a=1;
var curcolour;
var count=-1;
var move=1;

if (document.layers){
document.write('<layer name="a0" left=10 top=10 clip="0,0,2,2"></layer>'//40
+'<layer name="a1" left=0 top=0 clip="0,0,2,2"></layer>'
+'<layer name="a2" left=0 top=0 clip="0,0,2,2"></layer>'
+'<layer name="a3" left=0 top=0 clip="0,0,2,2"></layer>'
+'<layer name="a4" left=0 top=0 clip="0,0,2,2"></layer>'
+'<layer name="a5" left=0 top=0 clip="0,0,2,2"></layer>'
+'<layer name="a6" left=0 top=0 clip="0,0,2,2"></layer>'
+'<layer name="a7" left=0 top=0 clip="0,0,2,2"></layer>');
thingsinarray=new array(document.a1,document.a2,document.a3,document.a4,document.a5,document.a6,document.a7)
}
else if (document.all){
document.write('<div id="iediv" style="position:absolute;top:0px;left:0px">'
+'<div id="c" style="position:relative">'
+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px"></div>'
+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px"></div>'
+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px"></div>'
+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px"></div>'
+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px"></div>'
+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px"></div>'
+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px"></div>'
+'</div>'
+'</div>');
thingsinarray=new array(iediv.all.c.all[0],iediv.all.c.all[1],iediv.all.c.all[2],iediv.all.c.all[3],iediv.all.c.all[4],iediv.all.c.all[5],iediv.all.c.all[6])
}
function colourstep(){
if (count_a < colours.length)count_a+=move_a;
if (count_a >= colours.length)count_a=0;
curcolour=colours[count_a];
tmr_a=settimeout('colourstep()',1500);
return curcolour;
}
function cyclethrougharray(){
if (count < thingsinarray.length)count=count+move;
if (count >= thingsinarray.length)count=0;
if (document.layers)thingsinarray[count].bgcolor=curcolour;
if (document.all)thingsinarray[count].style.background=curcolour;
settimeout('cyclethrougharray()',200)
}
function moveabout(){
if (document.layers)
{
ypos = window.pageyoffset+window.innerheight/2 + window.innerheight/3 * math.cos((runtime)/3)*math.cos(runtime/50);
xpos = window.pagexoffset+window.innerwidth/2 + window.innerwidth/2.4 * math.sin((runtime)/5)*math.cos(runtime/30);
}
else if (document.all)
{
ypos = document.body.scrolltop+document.body.offsetheight/2 + document.body.offsetheight/2.8*math.cos((runtime)/3)*math.cos(runtime/10);
xpos= document.body.scrollleft+document.body.offsetwidth/2 + document.body.offsetwidth/2.4*math.sin((runtime)/5)*math.sin(runtime/20);
}
runtime+=a_step;
tma=settimeout("moveabout()", 10);
}
function twistnspin(){
if (document.layers)
{
for ( i = 0 ; i < 8 ; i++ ) //number of ns layers!
{
var templayer="a"+i
document.layers[templayer].top = ypos+cntr*math.cos(((currstep+1)+i*4.5)/5)*math.cos(currstep/10)
document.layers[templayer].left =xpos+cntr*math.sin(((currstep+1)+i*4.5)/5);
}
}
else if (document.all)
{
for (i=0;i<iediv.all.c.all.length;i++)
{
iediv.all.c.all[i].style.top = ypos+cntr*math.cos(((currstep+1)+i*4.5)/5)*math.cos(currstep/10)
iediv.all.c.all[i].style.left= xpos+cntr*math.sin(((currstep+1)+i*4.5)/5);
}
}
currstep+=step;
settimeout("twistnspin()",10);
}
function shrink(){
cntr-=0.5;
goshrink=settimeout('shrink()',10);
if (cntr <=20)
{cleartimeout(goshrink);swell()}
}
function swell(){
cntr+=0.5;
goswell=settimeout('swell()',10);
if (cntr >=70)
{cleartimeout(goswell);shrink()}
}
function startup(){
moveabout();
twistnspin();
shrink();
colourstep();
cyclethrougharray();
}
startup();
// -->
</script>
</body>
</html>


download javascript Download Script


Ver ejemplo javascript

Debes copiar y pegar esta porción de código en tu página.



Scripts Javascript