Cartoon Spiderman hecho con CSS3 y HTML5
Esta es simplemente una animación increíble, completamente escrita utilizando CSS3 y HTML5 con un poco de ayuda de javascript usando jQuery (sin mencionar los gráficos).
El trabajo es de Anthony Calzadilla (@acalzadilla) como se muestra en la misma animación, quien ha utilizado como fuente de inspiración la animación de inicio de la serie animada spider-man de 1967.
Explica que el personaje fue creado utilizando Adobe Illustrator junto a Photoshop creadas especialmente para poder ser reutilizadas y así ahorrar la carga de muchas imágenes innecesarias.
Utilizando las propiedades transform-origin que utiliza coordenadas x e y determinó el punto desde el cual la animación y/o transformación (rotate, transform) ocurre.
Aunque no lo crean, la mayor barrera que encontró para realizarla fue el intercambio de escenas en el momento preciso para que coincida con la animación CSS3. Pero utilizando la función delay de jQuery aunque su propósito era usar únicamente las propiedades del CSS3.
Las animaciones sí utilizan la función delay (@key-frame) de CSS3 para iniciar animando en las escenas justo al instante que las escenas se activan con jQuery. Otro inconveniente que tuvo que lidiar fue el control del inicio de la animación y como podrán apreciar los elementos se van cargando al momento de ser mostrados lo cual hace ver una animación incompleta al primer vistazo ya que los elementos no están todos cargados inicialmente, pero al volver a reproducir la animación se logra ver la animación bien realizada, completa y con sonido.
Si desean saber más sobre cómo se realizó, léanlo en Optimum7.com (artículo en Inglés)
Y la animación http://www.optimum7.com/css3-man/ que requiere de un navegador que utiliza Webkit (Chrome, Safari)
0 comentarios:
Publicar un comentario