CRear efecto de transicion entre dos imagenes.

Paranoid · #1 (**permalink**) 12/03/2008, 03:54

Hola me gustaría saber si hay alguna forma con Javascript o con otra tecnología, de crear tu propio efecto de transición entre dos imágenes. El efecto que quiero crear realmente consiste en una imagen a modo barra... que vaya subiendo desde la parte inferior de la imagen inicial hacia arriba, ya medida que sube, vaya mostrando la imagen 2.

Muchas gracias.
PD: Se que se puede hacer en Flash... pero no tengo ni idea de flash :P

aloqui · #2 (**permalink**) 12/03/2008, 05:19

No es exactamente lo que pides, pero puedes mirar a ver si te sirve el script de la siguiente página, a mí me gusta el efecto: http://www.dynamicdrive.com/dynamici...ogjs/index.htm
(Haz click en las imágenes pequeñas para seleccionarlas).

codigojavascript · #3 (**permalink**) 12/03/2008, 15:19

Aca hay un Script que hace una transicion de imagenes. Las imágenes están estaticas pero no creo que sea dificil colocarlas en una capa que casbie de posición para lograr lo que tu quieres:

Aca va el enlace al script:

Transición de imágenes con efecto Blur.

Si necesitas ayuda para lograr que las imagenes se muevan de arriba hacia abajo o como quieras me avisas y te doy una mano.

Saludos

furoya · #4 (**permalink**) 25/03/2008, 11:29

Acá hay otros

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>PERSIANA. </title>
<script type="text/javascript">

var alto1 = alto2 = 256; //altura de las barras en px

function cambia1(){
if(alto1 > 0){
alto1 = alto1 - 2; //'2' debe ser submúltiplo de alto1
document.getElementById("persiana1").style.height = alto1 + "px";
setTimeout("cambia1()" , 50);
}
}

function cambia2(){
if(alto2 > 0){
alto2 = alto2 - 2; //'2' debe ser submúltiplo de alto2
document.getElementById("persiana2").style.top = alto2 + "px";
setTimeout("cambia2()" , 50);
}
}

</script>
<style type="text/css">

body{background-color:black; color:white; }

#contenedor1, #contenedor2 {position:relative; background-image:url(http://www.forosdelweb.com/images/icons/icon7.gif); cursor:pointer; float:left; width:16px; height:256px; overflow:hidden; border:none; margin-left:100px; }

#persiana1 {position:absolute; top:0; left:0; background-image:url(http://www.forosdelweb.com/images/icons/icon5.gif); background-color:red; width:16px; height:256px; overflow:hidden; border:none; }

#persiana2 {position:absolute; top:256px; left:0; background-image:url(http://www.forosdelweb.com/images/icons/icon5.gif); background-color:red; width:16px; height:256px; overflow:hidden; border:none; }

</style>
</head>
<body>
<h2>Transici&oacute;n de imagen. </h2>

<div id="contenedor1" onclick="cambia1()"><div id="persiana1"></div></div>

<div id="contenedor2" onclick="cambia2()"><div id="persiana2"></div></div>
</body>
</html>

En las FAQs de javascript y en las de Web General hay bastantes más, aunque no todas son para subir la segunda imagen.

Paranoid · #5 (**permalink**) 27/03/2008, 06:47

Hola furoya,

la verdad es que por lo que he visto, tu solución es la mejor. Pero no consigo terminar de que funcione bien. En este código presentas dos opciones de persiana.. y lo que yo realmente quiero es una mezcla de las dos.

La función cambia2 es la que mas se adapta a mis necesidades, pero necesito que al subir la barra, descubra otra imagen, como hace la función cambia 1.

Muchas gracias!

furoya · #6 (**permalink**) 03/04/2008, 13:52

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.

Paranoid · #7 (**permalink**) 10/06/2008, 05:13

ya probé el script y me funciona correctamente. Hora quiero hacerle un cambio.. ye s que haga ese efecto cn onmouseover... y el efecto contrario es decir que se baje la cortina, al desplazar el raton fuera de la imagen... como podría hacerlo? Que he intentado adaptar este codigo pero no me funciona..

furoya · #8 (**permalink**) 13/06/2008, 12:28

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>
<title>PERSIANA. </title>
<script type="text/javascript">

var limite = -64;
var despl;
var suma = -2;
var mueve = 0;

function cambiaArr(){
clearTimeout(despl);
suma = -2
limite = -64;
cambia();}

function cambiaAba(){
clearTimeout(despl);
limite = 0;
suma = 2
cambia();}


function cambia(){
if(mueve != limite){
clearTimeout("despl");
mueve = mueve + suma; 
document.getElementById("persiana").style.top = mueve + "px";
despl = setTimeout("cambia()" , 50);
}
}

</script>
<style type="text/css">

body{background-color:black; color:white; }

#contenedor {position:relative; background-image:url([url]http://www.forosdelweb.com/images/icons/icon7.gif);[/url] cursor:pointer; float:left; width:16px; height:64px; overflow:hidden; border:none; margin-left:100px; }

#persiana {position:absolute; top:0; left:0; background-image:url([url]http://www.forosdelweb.com/images/icons/icon5.gif);[/url] background-color:red; width:16px; height:64px; overflow:hidden; border:none; }

</style>
</head>
<body>
<h2>Transici&oacute;n de imagen. </h2>

<div id="contenedor" onmouseover="cambiaArr()" onmouseout="cambiaAba()"><div id="persiana"></div></div>
</body>
</html>