Foros del Web » Programación web » Javascript »

CRear efecto de transicion entre dos imagenes.

Estas en el tema de CRear efecto de transicion entre dos imagenes. en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/03/2008, 03:54
 
Fecha de Ingreso: diciembre-2003
Mensajes: 221
Antigüedad: 10 años, 10 meses
Puntos: 2
CRear efecto de transicion entre dos imagenes.

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
  #2 (permalink)  
Antiguo 12/03/2008, 05:19
Avatar de aloqui  
Fecha de Ingreso: diciembre-2007
Mensajes: 973
Antigüedad: 6 años, 10 meses
Puntos: 24
Re: CRear efecto de transicion entre dos imagenes.

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).
__________________
Grupos de Música
Pop Music Stars
  #3 (permalink)  
Antiguo 12/03/2008, 15:19
 
Fecha de Ingreso: diciembre-2007
Ubicación: Argentina
Mensajes: 151
Antigüedad: 6 años, 10 meses
Puntos: 2
Re: CRear efecto de transicion entre dos imagenes.

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
  #4 (permalink)  
Antiguo 25/03/2008, 11:29
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 11 años, 11 meses
Puntos: 317
Re: CRear efecto de transicion entre dos imagenes.

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.
  #5 (permalink)  
Antiguo 27/03/2008, 06:47
 
Fecha de Ingreso: diciembre-2003
Mensajes: 221
Antigüedad: 10 años, 10 meses
Puntos: 2
Re: CRear efecto de transicion entre dos imagenes.

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!
  #6 (permalink)  
Antiguo 03/04/2008, 13:52
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 11 años, 11 meses
Puntos: 317
Re: CRear efecto de transicion entre dos imagenes.

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.
  #7 (permalink)  
Antiguo 10/06/2008, 05:13
 
Fecha de Ingreso: diciembre-2003
Mensajes: 221
Antigüedad: 10 años, 10 meses
Puntos: 2
Respuesta: CRear efecto de transicion entre dos imagenes.

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..
  #8 (permalink)  
Antiguo 13/06/2008, 12:28
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 11 años, 11 meses
Puntos: 317
Respuesta: CRear efecto de transicion entre dos imagenes.

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> 
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:58.
SEO by vBSEO 3.3.2