Edge de Adobe, crea animaciones en HTML5 con CSS3

Hola, acabo de descargar esta herramienta, se llama Edge y la puedes descarga ya desde este link:

http://labs.adobe.com/technologies/edge/

Todavía está en una etapa temprana ,pero promete, es interesante el seteo de las propiedades y el timeline, generando todo el codigo que se necesita para la animación y transformaciones en dos archivos, uno js y otro css.

image

Al momento tiene la opción de agregar elementos de texto, cuadros y cuadros con bordes redondeados, luego al momento de generar la animación vamos a ver que la carpeta tiene la siguiente estructura:

image

El archivo CSS( prueba1_edge.css) tiene todas las transformaciones que ocurriendo en la animación, generando el código necesario para tener la compatibilidad con los distintos browser(que soporten mediante CSS  estas características, claro está).

Por ejemplo el cuadro que hice mediante Edge

#Cuadro {

    background-color: rgba(212,71,71,1.00);

    border-style: solid;

    width: 152px;

    height: 123px;

    border-color: rgba(0,0,0,1.00);

    border-width: 3px;

    -webkit-transform: translateX(-17px) translateY(6px);

    -moz-transform: translateX(-17px) translateY(6px);

    -ms-transform: translateX(-17px) translateY(6px);

    -o-transform: translateX(-17px) translateY(6px);

}

Puedes ver que tiene el soporte para los distintos browser.

En el archivo prueba1_edge.js, está todo el script que nos sirve para generar las animaciones, tambien dentro de la carpeta includes veremos librerías propias de Edge y jQuery, de hecho para inicializar las animaciones tenemos el siguiente código:

 

$(window).ready(function() {
     $.Edge.initialize(symbols);
});

 

jQuery, como siempre, presente Sonrisa

 

Hice una pequeña prueba, jugando, una animación sin sentido, pero corre bien en los distintos navegadores, también la probé recién en un LG Optimus One  y se ve sin problemas. Luego la pruebo en un IPad, pero dicen que corre perfecto.

 

La prueba esta acá:

http://www.travelco.cl/edge/prueba1.html

 

Así que a probar esta nueva herramienta , por lo que tengo entendido ,la beta es de hoy, no hay tiempo que perder!

 

Saludos!

Gonzalo

2 comentarios sobre “Edge de Adobe, crea animaciones en HTML5 con CSS3”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *