|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - WebScript - Efectos - Abeja
Abeja
por Luciano Moreno, del departamento de diseño web de BJS Software.
En esta ocasión, amigos, vamos a crear en nuestra página un bonito efecto de movimiento, situando en la misma una simpática abejita que va a acompañarnos moviéndose por la pantalla.
Aviso de antemano que es un script bastante complicado para los que no entiendan bien las bases del DHTML y las interpretaciones que hacen del él los distintos navegadores.
Lo cogí hace tiempo de una página que no recuerdo su nombre, y lo he remodelado y adaptado a Nestcape Navigator 6x. Si su autor original lo ve aquí, le ruego que me disculpe por el atrevimiento de haberlo modificado. Os lo enseño porque creo que es bastante instructivo y divertido.
En esencia vamos a situar una capa en nuestra página, capa que va a contener la imagen de la abeja, y esa capa la vamos a mover aleatoriamente por la ventana del navegador, sin más limitaciones que no rebasar las medidas de ésta, para evitar que aparezcan las barras de desplazamiento en el navegador, cosa que afea y despista.
Vamos a ver el código completo de la página y luego lo comentamos un poco:
<html>
<head>
<title>HTMLWeb - WebScript - Efectos -
Abeja</title>
<style
type="text/css">
#img1{position:absolute;width:51px;height:50px; top:0px; left:0px;
visibility:hidden; z-index:10}
</style>
<script language="Javascript" type="text/javascript">
var
velocidad=
100; //velocidad en milisegundos
var cambio=
200; //tiempo
en que tarda en cambiar la velocidad en milisegundos.
var
xmax=20;
//pixels maximos de cambio
derecha-izquierda
var
ymax=20;
//pixels maximos de cambio arriba-abajo
var w_x, w_y, x, y, tx, ty, xo,
yo;
var
incrx=2;
var
incry=2;
var
xdir=true;
var
ydir=true;
function inicia()
{
ajusta();
mueveImagen(w_x/2,w_y/2);
if(document.all)
document.all('img1').style.visibility="visible";
else
if(document.layers)
document.layers['img1'].visibility="show";
else
if(document.getElementById)
document.getElementById('img1').style.visibility="visible";
anima();
cambia();
recarga2();
}
/**
* funcion para centrar la imagen en
pantalla cuando se resicea la ventana del
navegador
*/
function ajusta()
{
if(document.all)
{
w_x=document.body.clientWidth;
w_y=document.body.clientHeight;
}
else
if(document.layers)
{
w_x=window.innerWidth-document.img1.document.width;
w_y=window.innerHeight-document.img1.document.height;
}
else
if(document.getElementById &&
!document.all)
{
w_x=window.innerWidth;
w_y=window.innerHeight;
}
}
function cambia()
{
xdir=(Math.floor(Math.random()*2)==0);
ydir=(Math.floor(Math.random()*2)==0);
incrx=Math.floor(Math.random()*xmax);
incry=Math.floor(Math.random()*ymax);
setTimeout('cambia()',cambio);
}
function
anima()
{
if(document.all)
{
tx=document.all('img1').style.pixelLeft;
ty=document.all('img1').style.pixelTop;
xo=document.body.scrollLeft;
yo=document.body.scrollTop;
}
else
if(document.layers)
{
tx=document.layers['img1'].left;
ty=document.layers['img1'].top;
xo=pageXOffset;
yo=pageYOffset;
}
else
if(document.getElementById &&
!document.all)
{
tx=parseInt(document.getElementById('img1').style.left);
ty=parseInt(document.getElementById('img1').style.top);
xo=pageXOffset;
yo=pageYOffset;
}
if(ydir)
{
if((ty)>(w_y-75))
{
ydir=false;
mueveImagen(0,-incry);
}
else
{
mueveImagen(0,incry);
}
}
else
{
if((ty)<75)
{
ydir=true;
mueveImagen(0,incry);
}
else
{
mueveImagen(0,-incry);
}
}
if(xdir)
{
if((tx)>(w_x-75))
{
xdir=false;
mueveImagen(-incrx,0);
}
else
{
mueveImagen(incrx,0);
}
}
else
{
if((tx)<75)
{
xdir=true;
mueveImagen(incrx,0);
}
else
{
mueveImagen(-incrx,0);
}
}
setTimeout('anima()',velocidad);
}
function
mueveImagen(dx,dy)
{
if(document.all)
{
document.all('img1').style.pixelTop+=dy;
document.all('img1').style.pixelLeft+=dx;
}
if(document.layers)
{
document.img1.moveBy(dx,dy);
}
else
if(document.getElementById &&
!document.all)
{
document.getElementById('img1').style.top=parseInt(document.getElementById('img1').style.top)+dy;
document.getElementById('img1').style.left=parseInt(document.getElementById('img1').style.left)+dx;
}
}
function
esconde()
{
if
(document.all)
document.all('img1').style.visibility="hidden"
else if
(document.layers)
document.layers['img1'].visibility="hide"
else if
(document.getElementById)
document.getElementById('img1').style.visibility="hidden"
}
function
recarga()
{
window.location.reload()
}
function
recarga2()
{
if
(document.layers)
setTimeout("window.onresize=recarga",400)
}
if
(document.all)
window.onresize=ajusta
window.onload=inicia
</script>
</head>
<body bgcolor="#ffff99">
<div id="img1" style="position:absolute;width:51px;height:50px;
top:0px; left:0px; visibility:hidden; z-index:10">
<a href="javascript:esconde()"><img src="abeja.gif" border=0
name="image1" width=51 height=50></a>
</div>
</body>
</html>
Consideraciones:
1) Lo primero que podéis notar es que he repetido dos veces la definición de estilos de la capa, ya que así me aseguro que sea el navegador que sea, cuando acceda a la lectura de las posiciones de la capa encuentre valores que leer, ya que si no se han definido previamente las propiedades nos puede dar como valor " ", con el consiguiente error en los cálculos.
2) La capa se mueve aleatoriamente, pero, como es lógico, el efecto del movimiento de las alas de la abeja es debido a que la imagen es un gif animado. Se puede usar cualquier imagen, pero si es estática el efecto conseguido es menor.
3) Como siempre, usamos un conjunto de instrucciones diferente para cada navegador y en cada función, y accedemos a las propiedades de una capa y de la ventana del navegador de forma diferente también para cada uno de ellos, ya que tratan de forma diferente casi todos los objetos. Aunque a veces parezca redundante y cansino repetir lo mismo una y otra vez (podemos crear variables que almacenen las cadenas de acceso a cada navegador y usar luego las mismas instrucciones para todos en una función), lo hago así para que veáis en cada momento cómo se maneja cada navegador y para seguir una metodología de programación constante.
4) En la función cambia() usamos los métodos random y floor del objeto propio del lenguaje Math. El primero de ellos nos genera un número aleatorio entre 0 y 1, y el segundo redondea un número al menor entero inferior a él. Con ello conseguimos un número de pixels entero y aleatorio.
5) Si la posición de la capa en cada coordenada es superior o inferior a los límites de la pantalla +/- 75 pixels cambiamos de signo el incremento de coordenadas aleatorio, para que la imagen no se nos salga de la ventana del navegador.
6) Las funciones cambia() y anima() se llaman a sí mismas mediante el método setTimeout("funcion",tiempo), que llama a la función que tiene como argumento al cabo del argumento tiempo en milisegundos. Con ello conseguimos el efecto de animación necesario.
7) Hemos puesto una función final esconde() para que si el usuario desea hacer desaparecer la abeja le baste con pinchar sobre ella, con lo que accedemos a la propiedad visibility y la hacemos hidden (o hide para N4), con lo que la capa se oculta y desaparece la abeja.
8) Establecemos la función ajusta() para que si el usuario cambia el tamaño de la ventana del navegador se inicialice el código, ya que la abeja debe verse siempre en pantalla, y ésto depende de las dimensiones de la misma.
El resultado del csdigo anterior podéis verlo pinchando aquí. Lo abro en una ventana nueva porque merece la pena verlo bien.
Si tenéis dudas sobre el código, ya sabéis. A estudiar los otros ejemplos de DHTML y a aprender (Bueeeeeeno, me las podéis preguntar también).