Hola todos.
Me quedé pensando en el pajarito. No es muy difícil hacer una cosa así. El mayor problema está en el tiempo que lleva ajustarlo.
Por si te interesa entender un poco como funcionan,
merino_renato, te dejo un borrador (muy borrador) que hice con un ejemplo básico. Además de diseño, le falta un cambio de velocidad para cuando el "muñequito" llega a su posición, más puntos de llegada en todo el documento, algo más de animaciónes (lo hice con 24 cuadros), en fin, nada que no se haya visto acá antes. Pero me parece que este ejemplo no estaba. Había con bichos siguiendo al puntero y menúes siguiendo al scrollbar. No más.
Si ya estaba, me avisan y al menos pongo un enlace. Porque seguro va a estar mejor que éste.
Traté de desarmar las funciones lo más posible para que los novatos puedan seguir el desarrollo, en una versión final se puede ahorrar más código.
No comento nada de sprite, ni de los métodos que uso porque, insisto, ya están muy vistos en estos Foros. Igual dejo algún enlace.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">
var estiloMuneco , altoPantalla , desplPag , mitadPantalla , puntoEscalar;
var esperaLoopAnda , esperaEjecAnda , cambioAltura , llegoHasta;
var mueveCuadro = 0;
var mueveFila= 0;
/* Distancia en px que se desplaza / total de cuadros animación.
Es útil cuando hay puntos prefijados de "apoyo" en el fondo */
var relacion = 40 / 24;
function mide() {
/* Detiene la función hasta que se termine el arrastre del botón del scrollbar */
clearTimeout(esperaLoopAnda);
/*Referencia para el escalador */
estiloMuneco = document.getElementById("muneco").style;
/* Alto de pantalla (no anda en IE) */
altoPantalla = screen.height;
/* Distancia del desplazamiento (no anda en IE) */
desplPag = window.pageYOffset;
/* Mitad (+/-) de la pantalla */
mitadPantalla = altoPantalla / 2;
/* Posición que debe alcanzar el escalador */
puntoEscalar = mitadPantalla + desplPag;
/* Una vez recalculadas las medidas, se dispara la función anda()
con 600 milisegundos de guarda */
esperaLoopAnda = setTimeout("anda()" , 600)
}
function anda() {
clearTimeout(esperaEjecAnda); /* Reseteo del loop, por si estaba ejecutándose */
/* Valor 'X' para desplazar el sprite al cuadro siguiente.
'52' es el ancho en px de cada cuadro de la animación */
mueveCuadro = mueveCuadro - 52 ;
if (mueveCuadro < -572){ /* Porque llegó al cuadro 'L1' ó 'L2' */
mueveCuadro = 0; /* Vuelve al primero de su fila */
/* Cambia 'Y' a la otra fila para continuar */
mueveFila = (mueveFila == 0)? -119 : 0;
}
/* Aplica la posición del fondo para animación sprite */
estiloMuneco.backgroundPosition = mueveCuadro+"px "+mueveFila+"px";
llegoHasta = estiloMuneco.top; /* Lee la última distancia vertical del escalador */
/* Confirma si está debajo de mitad de página */
if(parseInt(llegoHasta) > puntoEscalar+50){
/* Crea un valor de top más arriba */
cambioAltura = parseFloat(llegoHasta)*1 - (relacion);
}
/* Confirma si está encima de mitad de página */
else if(parseInt(llegoHasta) < puntoEscalar-50){
/* Crea un valor de top más abajo */
cambioAltura = parseFloat(llegoHasta)*1 + (relacion);
}
/* Aplica ese nuevo valor al escalador */
estiloMuneco.top = cambioAltura + "px";
/* Si no está +/- por el medio de la página, repite la función anda()
en 50 milisegundos.
'60' es un valor más alto que cada cuadro del escalador */
if(parseInt(estiloMuneco.top) > (puntoEscalar+60) || parseInt(estiloMuneco.top) < (puntoEscalar-60)) {
esperaEjecAnda = setTimeout("anda()", 50);
}
document.title = "desplPag: "+desplPag+" /altoPantalla: "+altoPantalla+" /mitadPantalla: "+mitadPantalla+" /puntoEscalar: "+puntoEscalar+" /llegoHasta: "+llegoHasta+" /cambioAltura: "+cambioAltura;
}
onscroll = mide;
</script>
<style type="text/css">
body {background: url(http://img94.imageshack.us/img94/4623/texturarocarosa04.jpg) rgb(250,220,220) repeat-y;
background-position: 30px 0; text-align: center;
font: bold 80px/150px arial, helvetica, sans-serif;}
#muneco {background: url(http://img94.imageshack.us/img94/8905/escalero3trans.gif) no-repeat; width:52px;
height: 100px; background-position:0 0; position: absolute; top:0px;
left:50px; }
h2 {font: bold 30px/50px arial, helvetica, sans-serif; text-align: left;
margin-left: 140px; }
</style>
</head>
<body>
<h2>El muñeco escala la pared de piedra hacia arriba o abajo dependiendo de
la posición del scroll de la página.</h2>
<div>0 <br>1 <br>2 <br>3 <br>4 <br>5 <br>6 <br>7 <br>8 <br>9 <br>10
<br>11 <br>12 <br>13 <br>14 <br>15 <br>16 <br>17 <br>18 <br>19 <br>20
</div>
<div id=muneco onclick="anda()" style="top:300px"></div>
</body>
</html> Un detalle. No tengo Internet Explorer en esta máquina, así que el código es para los demás navegadores. No lo hice compatible porque no lo puedo probar después. Eso se los debo.
◙
◙
Sprites css Otro carrousel de imágenes manual. ( imagen 3D )