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!

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s