Efecto en imagen

tyrula · #1 (**permalink**) 25/07/2012, 03:51

Hola a todos, me estan pidiendo que una imagen que sea grande segun donde tengas el cursor se mueva hacia arriba o hacia abajo, alguien sabe si hay algo hecho con jquery?? este es el ejemplo de lo que quieren, pero está hecho en flash

http://www.bisazza.com/#/hotel_it_0_2_51.html

Un saludo

furoya · #2 (**permalink**) 25/07/2012, 06:58

¿Algo como esto?

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>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">

<script type="text/javascript">
alert("Click con el botón central del ratón para desplazar la imagen.")
</script>

</head>
<body style="overflow:hidden; width:100%;">
<img style="width:150%" src="http://img546.imageshack.us/img546/2810/julianpuyal.jpg" 
alt="Julián Puyal.">
</body>
</html>

(Puede que en algún navegador debas eliminar el overflow: hidden.)

En realidad el efecto es muy sencillo. Debe estar en algún lado. Y en este Foro, seguro.
Tienes que leer la posición del puntero y con esas coordenadas le pasas el desplazamiento a la imagen. Otra es simular el arrastre, bajando el botón y moviendo el puntero, como hace (p.e.) acroreader con los documentos.

Imagen :

tyrula · #3 (**permalink**) 25/07/2012, 08:59

Hola Furoya! Pues si, sería algo como esto pero sin tener que hacer pinchar, sino sólamente por estar encima, como en la web de Bisazza

Grácias!!

tyrula · #4 (**permalink**) 25/07/2012, 09:10

Acabo de encontar esto....

http://tympanus.net/codrops/2010/09/...image-gallery/

Creo que lo podré combinar con todo lo que tengo.... ya contaré! Gracias!

furoya · #5 (**permalink**) 25/07/2012, 10:15

Lo que no sé es si hace falta usar JQuery. Y por otro lado, el efecto en sí es muy sencillo, agregarle la galería y la transición ya es otra historia, pero el mover el puntero para desplazar una imagen ya estaba explicado en el Foro, con javascript.

Lo comento porque si no sabes bastante de JS, no vas a poder modificar esa "librería". Pero si te sirve tal cual está, entonces no necesitas cambiar nada y está bien.

Zoom en imagenes