Foros del Web » Programación web » Javascript » Jquery »

[jQuery] Efecto zoom en una imagen

Estas en el tema de [jQuery] Efecto zoom en una imagen en el foro de Jquery en Foros del Web. Hola gente, necesito vuestra ayuda para hcer el siguiente efecto. Tengo una imagen de una resolucion superior a 1280 * 1024 osea que puedo recortarla ...
  #1 (permalink)  
Antiguo 28/01/2010, 12:59
 
Fecha de Ingreso: junio-2007
Mensajes: 189
Antigüedad: 7 años, 4 meses
Puntos: 3
[jQuery] Efecto zoom en una imagen

Hola gente, necesito vuestra ayuda para hcer el siguiente efecto.

Tengo una imagen de una resolucion superior a 1280 * 1024 osea que puedo recortarla y cambiarle el tamaño a mi gusto, sin problema.

Ese no es el problema.

El problema es que necesito que primero se muestre solo la esquina inferior izquierda de la imagen, pero a pantalla completa, y que luego haga un efecto zoom como de alejamiento y que termine por mostrar toda la imagen completa.

Aquí os dejo mi codigo (Funciona en Firefox 3.5)

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.   <title>Introduccion</title>
  5.   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  6.   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
  7.   <script type="text/javascript">
  8.         $(function(){
  9.             $("#intro").css({
  10.                 width: '400%',
  11.                 height: '400%',
  12.                 top: '-300%',
  13.                 opacity: 0
  14.             })
  15.             .animate({
  16.                 width: '100%',
  17.                 height: '100%',
  18.                 top: 0,
  19.                 opacity: 1
  20.             }, 7000)
  21.         });
  22.     </script>
  23.   <style type="text/css">
  24.         body, html
  25.         {
  26.             overflow: hidden;
  27.         }
  28.        
  29.         body
  30.         {
  31.             margin: 0;
  32.             padding: 0;
  33.             background-color: #000;
  34.         }
  35.        
  36.         #intro
  37.         {
  38.             position: absolute;
  39.             left: 0%;
  40.             margin: 0px;
  41.             padding: 0px;
  42.             width: 400%;
  43.             height: 400%;
  44.             top: -300%;
  45.         }
  46.     </style>
  47. </head>
  48.  
  49.     <div id="intro">
  50.         <img id="imagen" src="./images/intro.jpg" width="100%" height="100%" />
  51.   </div>
  52. </body>
  53. </html>
  #2 (permalink)  
Antiguo 28/01/2010, 13:42
Avatar de hector2c  
Fecha de Ingreso: noviembre-2007
Ubicación: Perú - Tacna
Mensajes: 978
Antigüedad: 6 años, 11 meses
Puntos: 25
Respuesta: [jQuery] Efecto zoom en una imagen

tendras algun ejemplo en otro portal, para mostrar lo que realmente necesitas??? jejeje
  #3 (permalink)  
Antiguo 28/01/2010, 15:00
 
Fecha de Ingreso: junio-2007
Mensajes: 189
Antigüedad: 7 años, 4 meses
Puntos: 3
Respuesta: [jQuery] Efecto zoom en una imagen

Pues la verdad, en javascript no lo e visto, en flash creo que un par de veces, pero no tengo las webs ahora mismo
  #4 (permalink)  
Antiguo 28/01/2010, 17:20
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.015
Antigüedad: 5 años, 7 meses
Puntos: 101
Respuesta: [jQuery] Efecto zoom en una imagen

Te conviene hacerlo vos, con un animate... pero me parece que una imagen (de una esquina) tiene que transformarse en otra no? Propongo que la imagen de la esquina se vaya con animate y de lugar a la otra...

Ya que estamos con temas de zoom, chequeen esto, que esta bueno:
http://www.mind-projects.it/projects/jqzoom/

Hace zoom mientras pasas el mouse por encima de una imagen. Tambien esta el magic zoom:
http://www.magictoolbox.com/magiczoom/

:)
  #5 (permalink)  
Antiguo 29/01/2010, 00:12
 
Fecha de Ingreso: junio-2007
Mensajes: 189
Antigüedad: 7 años, 4 meses
Puntos: 3
Respuesta: [jQuery] Efecto zoom en una imagen

Lo que quiero es que primero se vea una parte de la imagen, pero ampliada a toda la pantalla, y que despues poco a poco parezca que nos alejamos hasta que toda la imagen sea la que ocupa el 100% de la pantalla
  #6 (permalink)  
Antiguo 29/01/2010, 07:24
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.015
Antigüedad: 5 años, 7 meses
Puntos: 101
Respuesta: [jQuery] Efecto zoom en una imagen

Entonces no hay cambio de tamaño, realmente. Tendrías gran parte de la pantalla velada.... eso sería todo. Si es así, es facil. Pones un covertor o dos, y lo redimensionas con .animate()
  #7 (permalink)  
Antiguo 29/01/2010, 07:32
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.015
Antigüedad: 5 años, 7 meses
Puntos: 101
Respuesta: [jQuery] Efecto zoom en una imagen

Otra vez, algo que no es lo que buscas, pero fijate en esto:
http://www.gruppo4.com/~tobia/cross-slide.shtml

... en el tercer ejemplo hay un zoom In / Out. Mezclado con un crossfade.
  #8 (permalink)  
Antiguo 29/01/2010, 07:58
 
Fecha de Ingreso: junio-2007
Mensajes: 189
Antigüedad: 7 años, 4 meses
Puntos: 3
Respuesta: [jQuery] Efecto zoom en una imagen

Exacto! Lo que busco es el Zoom out del tercer ejemplo que me pasastes, pero solo el Zoom Out.

Como hago eso que dices con el animate? Es que no entiendo lo que has querido decir.

Un saludo y gracias
  #9 (permalink)  
Antiguo 29/01/2010, 09:03
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.015
Antigüedad: 5 años, 7 meses
Puntos: 101
Respuesta: [jQuery] Efecto zoom en una imagen

A ver un par de ejemplos:
http://docs.jquery.com/Effects/animate

Este es una extensión de animate, usando UI:
http://docs.jquery.com/UI/Effects/Scale

Lamentablemente las demos son pobrecitas.
  #10 (permalink)  
Antiguo 29/01/2010, 16:12
 
Fecha de Ingreso: junio-2007
Mensajes: 189
Antigüedad: 7 años, 4 meses
Puntos: 3
Respuesta: [jQuery] Efecto zoom en una imagen

A ver, se usar el animate, y los efectos de jQuery, lo que no se es como enfocar la animación para que me sirba para IE7 IE8 y FF

Te has fijado en el codigo que puse en el primer post?
  #11 (permalink)  
Antiguo 29/01/2010, 16:27
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.015
Antigüedad: 5 años, 7 meses
Puntos: 101
Respuesta: [jQuery] Efecto zoom en una imagen

Ok, no lo habia mirado.

Lo que no se es si el fragmento es realmente un fragmento y el resto se "descubre" con animate, o si el fragmento es un "falso fragmento", es decir un fragmento con zoom incluído.

De cualquier manera, deberías jugar con los atributos de "scroll" (top, left, etc), o margin, se me ocurre. Centrar lo que necesites en la figura chiquita, por medio de scrolls. Por ejemplo:
Cita:
$('#book').animate({
left: '+=50px',
marginTop: "0.6in",
}, 5000])
Podrías hacer un borrador con photoshop o algun programa de fotos, para saber interpretarte mejor?
  #12 (permalink)  
Antiguo 30/01/2010, 05:03
 
Fecha de Ingreso: junio-2007
Mensajes: 189
Antigüedad: 7 años, 4 meses
Puntos: 3
Respuesta: [jQuery] Efecto zoom en una imagen

Mira aqui te paso algo que espero nos pueda ayudar



Bueno, en esta imagen como puedes ver, hay recuadro rojo.

Ese primer recuadro rojo, es la parte de la imagen que en primer lugar quiero que se vea a pantalla completa, es decir que me ocupe toda la pantalla.

Y luego que poco a poco, en la misma pantalla, y sin cambiar de imagen, se me muestre el resto de la imagen en toda la pantalla, pero con un efecto zoom out, es decir, de alejamiento.

Es como si estubieramos primero con una camara con todo el zoom mirando la esquina y despues redujeramos el zoom hasta ver toda la imagen.

Me e explicado?
  #13 (permalink)  
Antiguo 30/01/2010, 07:19
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.015
Antigüedad: 5 años, 7 meses
Puntos: 101
Respuesta: [jQuery] Efecto zoom en una imagen

QUe te parece una funcion en donde se alternan el redimensionado del recuadro con el redimensionado de una etiqueta <img>?

Algo asi:
Cita:
var tamañoIMG = $("#foto").width();

function imagen() {
$("#foto").width(tamañoIMG+50px);
}

function animar(){
$("#recuadro").animate({'width':'10%','height':'50 px'}, 2000, 'linear', function() { imagen(); animar(); });
};
La funciones estan bosquejadas nomas, como para darte una idea. Pero en el ejemplo no se si la suma de tamañoIMG+50px funcione como tal. Ademas falta el atributo height. Y el ciclo de animar el recuadro es infinito.

Etiquetas: efecto, zoom
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 17:37.
SEO by vBSEO 3.3.2