Ventanas Gelatinosas con Javascript y CSS Transforms
El otro día estaba viendo ejemplos de CSS Transforms. Y entre tantos ejemplos que vi, de repente se me ocurrió: ¿por que no hacer ventanas gelatinosas? Busqué un poco en Google, y como no encontré nada del tema, me puse a trabajar.
Como base, utilizé el framework Javascript Mootools, y la interfaz de ventanas MochaUI. Modifiqué el sistema de Drag de Mootools, para que haga gelatinosos los elementos que se mueven. Y cargando el “Drag” modificado antes de MochaUI, podemos obtener ventanas gelatinosas. Tengo que aclarar que los efectos son un poco irreales: yo no soy físico ni se como calcular para donde debería moverse la ventana, o cuanto debería agrandarse. Pero de todas formas, me parece que sirve para ilustrar que esto es totalmente posible de implementar, para alguien con los conocimientos necesarios.
Para probarlo, van a necesitar Firefox 3.5, o algún navegador basado en Webkit reciente (Safari 4, Chrome 2?). Al entrar, verán una ventana: si la mueven, notarán que es gelatinosa. En el resto de los navegadores, deberían ver la ventana, pero no tendría el efecto.
El link: http://labs.turl.com.ar/gelatinosas/
¡Espero comentarios!
Actualización: Las ventanas gelatinosas han sido probadas y están funcionando en Firefox 3.5 y 3.6, Chrome 2 y 3, Safari 4 y Midori 0.1.2.
Junio 28th, 2009 at 5:00 PM
[...] Impresionante lo que se puede hacer con javascripts y csswww.turleando.com.ar/2009/06/ventanas-gelatinosas-con-javasc… por eiR hace pocos segundos [...]
Junio 29th, 2009 at 4:10 AM
[...] Ventanas gelatinosas con Javascript y CSS Transformations [Turleando.com.ar] [...]
Junio 29th, 2009 at 4:22 AM
Pues ami no me funciona en Chrome 3.0 ni safari 4.0 en OS X no van en ningún navegador, al hacer drag desaparecen.
Junio 29th, 2009 at 5:56 AM
A mi con Chrome 2 no me funciona… no sé si es algo aislado o general.
Saludos!
Junio 29th, 2009 at 7:54 AM
Cierto, la ventana desaparece al arrastrarla.
El artículo es del 28 de Junio, demos un poco de tiempo para que el autor estudie que ocurre.
Junio 29th, 2009 at 10:56 AM
Pues es cierto, al mover la ventana, desaparece y reaparece cuando la soltás.
Junio 29th, 2009 at 12:15 PM
Cierto, desde FF v3.0, se ve la ventana sin efecto, no desaparece al arrastrarla.
Junio 29th, 2009 at 1:58 PM
La verdad que no lo probé ni con Chrome ni Safari 4, porque no están disponibles para mi plataforma (Linux). Pero acabo de bajar Midori 0.1.2, que usa webkit, y funciona. Y con Firefox 3.5 también funciona, porque lo he desarrollado y probado ahi
De paso probé en Firefox 3, la ventana funciona bien, pero no tiene el efecto.
Tengo entendido que Safari 4 y Chrome 3 usan versiones recientes de webkit, por lo que si anda en Midori debería de andar…
Intentaré ver que sucede cuando arranque Windows
Junio 29th, 2009 at 4:30 PM
En Chrome 2 y Safari 4 corre bien.
En Opera 10 y Firefox 3 corre bien pero sin el efecto ‘gelatina’.
Todo esto corriendo sobre WiinXp.
Junio 29th, 2009 at 4:39 PM
Acabo de probar en Windows XP con Chrome 3 y Safari 4: la ventana desaparecía porque el body tenía overflow: hidden. Lo he cambiado y ahora se ve bien en ambos navegadores.
Añadiré en el post una lista de los navegadores en donde fue probado
Junio 30th, 2009 at 11:19 AM
Lo probe con Safari 3.2.2 y anda mas o menos… hace un efecto raro… pero debe ser pq usa un webkit viejo.
Vere si lo puedo probar con la version 4
Saludos!
Junio 30th, 2009 at 12:56 PM
Lo he probado en Firefox 3.5 y funciona pero siento decirte que es muy muy cutre, la ventana se pone en diagonal recta totalmente no da sensación de gelatinosa, ya que no hay curvas!
Junio 30th, 2009 at 5:52 PM
Probado ahora mismo con Firefox 3.5… un efecto curioso jeje no llega a ser como las ventanas gelatinosas de compiz fusion, pero… mola jejeje
Julio 20th, 2009 at 11:59 AM
I’m sorry for commenting here, but I can’t find your email address and Launchpad is not very easy to use
. I’ve made a Simplified Chinese translation for Autoptimize, how can I send the files to you? Please send me a email 
Thank you.
Septiembre 2nd, 2009 at 10:14 AM
disculpen el problema que tengo es el diseño, no lo muestra, me pone solo el texto y si funciona, no se si es porque no copie el estilo o que puede ser?
baje todos los scripts y el codigo fuente de la pagina pero no me mustra la ventana con el estilo.