Disculpa, pero no llego a entender la diferencia. Una sugerencia es que hagas un gif animado para mostrar cómo quieres que se mueva la barra; pero tampoco debe ser necesario, se tiene que poder explicar mejor.
La idea de poner esos 2 ejemplos es ahorrarte el trabajo de extraerlos de otros con transiciones más complejas, que en definitiva hacen lo mismo. Los 2 códigos son elementales y despojados. No deberías tener problemas para modificarlos.
Lo más curioso puede ser que haya usado las imágenes como fondo de
div en vez de poner
img. Esto es más que nada para el primer ejemplo, ya que si usamos simplemente 2 imágenes no tenemos otra que ponerle un
clip; y el código se hace más complejo y menos para principiantes.
Supongo que no hace falta explicar cómo funcionan, pero por las dudas ...
El primer ejemplo tiene 2 capas superpuestas, la de adelante contiene la imagen original, la de atrás es la de reemplazo. El escript reduce la altura del
div que está adelante en 2 pixeles
Código:
var alto1 = alto2 = 256; //altura de las barras en px
...
alto1 = alto1 - 2; //'2' debe ser submúltiplo de alto1
document.getElementById("persiana1").style.height = alto1 + "px";
cada 50 milisegundos
Código:
setTimeout("cambia1()" , 50);
El efecto de 'recorte' simula que la capa de atrás avanza sobre la otra haciendo un reemplazo.
El siguiente ejemplo sí se podría haber hecho con
img. La segunda capa está desplazada hasta quedar debajo de la primera
Código:
#persiana2 {position:absolute; top:256px; left:0; ...
y con el escript la 'subimos' paso a paso hasta que cubra totalmente a la original. Como todo el conjunto está dentro de un
div con
overflow : hidden, la imagen de transición parece salir de la nada, pero siempre estuvo allí abajo.
El problema es que ambos efectos tienen un
bug. Pero si lo corrijo, prefiero hacerlo con otro efecto que te sirva (¡si a mí me da lo mismo!). Explícate un poco mejor, y si ya lo arreglaste sólo, pues entonces uso los que están arriba.