Animación en HTML5

Conocía la potencia del HTML5 para desarrollar movimiento en diseño web, pero no era consciente de la «salvaje» cantidad de posibilidades que nos ofrece. Unas posibilidades que serían seguramente más, si no fuese por la absurda incompetencia de navegadores como Explorer e incluso Firefox.

En esta impresionante web de la que hablamos hoy, además de mostrarnos cómo realizar animaciones con HTML5, podremos ver una serie de ejemplos web que seguro que os sorprenden.

Los ejemplos que vais a ver están desarrollados con CSS3, SVG, Canvas y WebGL

SVG es un sistema para crear gráficos vectoriales escalables (Scalable Vector Graphics), es un formato basado en XML y su desarrollo está a cargo del consorcio W3C, podéis encontrar más información en  www.w3.org/Graphics/SVG/Overview.htm8

La etiqueta canvas es usada en HTML 5 para la creación de gráficos 2d y 3d. Nos permite dibujar gráficos a través de scripting (normalmente JavaScript). Puede emplearse para dibujar gráficos, hacer composición de fotos, crear animaciones e incluso procesamiento de vídeo en tiempo real.

WebGL es un API para JavaScript, encargada de poder mostrar gráficos en 3D acelerados por hardware (GPU) en nuestras páginas web sin la necesidad de instalar plugins.

Os aconsejo que echéis un vistazo a toda la web y por supuesto que no os perdáis los ejemplos que os muestra en la sección Show Time!. Todas son muy vistosas e impresionantes, sin embargo, seguramente haya sido la de 2012.beercamp.com la que más me haya sorprendido, no dejéis de verla. La segunda captura que he colocado es de everyday3d.com, no te dejará indiferente 😉

Animación en HTML5

Animación 3D con HTML5

Para navegar la web, pasad de página usando los cursores del teclado.

VER ANIMACIÓN HTML5. CÓDIGO Y EJEMPLOS