[jQuery] Efecto zoom en una imagen

SoutlinK · #1 (**permalink**) 28/01/2010, 13:59

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Introduccion</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
  <script type="text/javascript">
        $(function(){
            $("#intro").css({
                width: '400%',
                height: '400%',
                top: '-300%',
                opacity: 0
            })
            .animate({
                width: '100%',
                height: '100%',
                top: 0,
                opacity: 1
            }, 7000)
        });
    </script>
  <style type="text/css">
        body, html
        {
            overflow: hidden;
        }
        
        body
        {
            margin: 0;
            padding: 0;
            background-color: #000;
        }
        
        #intro
        {
            position: absolute;
            left: 0%;
            margin: 0px;
            padding: 0px;
            width: 400%;
            height: 400%;
            top: -300%;
        }
    </style>
</head>
 
<body>
    <div id="intro">
        <img id="imagen" src="./images/intro.jpg" width="100%" height="100%" />
  </div>
</body>
</html>

hector2c · #2 (**permalink**) 28/01/2010, 14:42

tendras algun ejemplo en otro portal, para mostrar lo que realmente necesitas??? jejeje

SoutlinK · #3 (**permalink**) 28/01/2010, 16:00

Pues la verdad, en javascript no lo e visto, en flash creo que un par de veces, pero no tengo las webs ahora mismo

mayid · #4 (**permalink**) 28/01/2010, 18:20

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/

:)

SoutlinK · #5 (**permalink**) 29/01/2010, 01:12

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

mayid · #6 (**permalink**) 29/01/2010, 08:24

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()

mayid · #7 (**permalink**) 29/01/2010, 08:32

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.

SoutlinK · #8 (**permalink**) 29/01/2010, 08:58

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

mayid · #9 (**permalink**) 29/01/2010, 10:03

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.

SoutlinK · #10 (**permalink**) 29/01/2010, 17:12

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?

mayid · #11 (**permalink**) 29/01/2010, 17:27

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?

SoutlinK · #12 (**permalink**) 30/01/2010, 06:03

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?

mayid · #13 (**permalink**) 30/01/2010, 08:19

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.