Estrella de Navidad

indice de ejemplos

Solución

<script>

function iniAnima()

{

  var estnav = new oMovil('estrella', 10, 200,600, 190, 60, true, 'movEstrella');

  estnav.situar();

  animEst = new oAnimacion(estnav)

  animEst.iniciar('animEst');

}

function movEstrella()

{

  var y, x;

  x = Math.round(this.leeX()+this.incx);

  y = this.py0 + Math.round(40*Math.sin(x*Math.PI/180))

  this.ponY(y);

  this.ponX(x);

  this.situar();

  this.esFinal = Math.abs(this.px1-x) < Math.abs(this.incx);

}

</script>

<body color ="#FFFFFF" onload="iniAnima()">

<div id="estrella" style="position:absolute; z-index:1; width: 1; height: 1; overflow: visible; left: 6px; top: 14px"><img src="../../simbolos/estnav.gif" width="57" height="37"></div>

< !--Contenido de tu página-->

</body>

Explicación

Este ejemplo utiliza los objetos móviles, que se encuentrqan en la sección de Aplicaciones de esta web (también lo tienes al final de esta página), para construir esta estrella viajera atravesando la página. Si lees la documentación de esos objetos te será fácil comprender el funcionamiento de estos scripts. La función que desencadena todo el movimiento es iniAnima(), en ella se define estnav como un objeto oMovil( ), los argumentos para crearlos son: ID de la capa DIV donde se encuentra la estrella, posiciones X, Y iniciales y finales del movimiento, tiempo que debe tardar ese movimiento, un valor lógico (true o false) para indicar se el objeto debe permanecer visible al acabar el movimiento y el nombre de la función que define el movimiento de la estrella, esta última función es optativa, si no se usa la estrella se moverá linealmente desde la posición inicial a la final. En este ejmplo se ha usado una función senoidal, puedes usar cualquier otra. Si quieres que el movimiento se repita una y otra vez sólo tienes que añadir la sentencia:

animEst.enlazar('animEst',null,3000);

Antes de animEst.iniciar(). El argumento último (3000 en este caso) indica los milisegundos que tardará en repetirse el movimiento.

Al final de la página tienes un ZIP con una página de muestra que puedes modificar a tu gusto o cortar y pegar en las páginas en las que quieras ver esta bonita estrella viajera.

Como lo uso

 En la página sólo debes colocar la llamada a la función que inicia todo el movimiento y por supuesto un bloque DIV para contener a la figura que desees mover, puede ser la estrella del ejemplo o un Papá Noel o los tres reyes magos o los renos .... No olvides enlazar en la sección HEAD los scripts necesarios que encontrarás en la sección Aplicaciones.