28 Mar 2012

Animaciones para nuestra web con Javascript

Escrito por: paginas-web el 28 Mar 2012 - URL Permanente

La ya incuestionable emergencia de HTML5 como sustituto de Flash hace que muchos diseñadores y desarrolladores web se estén planteando qué tecnología es la que les permitirá realizar efectos de animación en sus páginas web, ya que son muchos los clientes los que aún piden que en su página haya animaciones o recursos de movimiento.

Por el momento, y aunque quizá de una forma no tan completa u versátil como la que ofrece Flash, podemos recurrir a una poderosa librería llamada Spritely.

Con este plugin podremos añadir animaciones a nuestros proyectos web , obteniendo animaciones de personajes, scrolls complejos con varios planos, etc. Todo ello, basándonos únicamente en Javascript y CSS.

Su uso es sencillo, fundamentalmente se basa en modificar el atributo background-image de cualquier imagen que tengamos en nuestro CSS, para conseguir la animación.
Podremos utilizar imágenes PNG o GIF para crear estos nuestros efectos visuales.
Spritely se basa en dos métodos: sprite() y pan() los cuales se encargan simplemente de animar la propiedad css background-image como ya hemos mencionado.

Se puede especificar la velocidad (speed, píxeles por frames). Y para superponer capas se utiliza la propiedad CSS z-index.
Combinando Javascript y CSS (e imaginación) se puede desplegar una abanico muy potente para el desarrollo de efectos y animaciones web.

Spritely nos permitirá obtener de forma sencilla animaciones de gran calidad para nuestros proyectos de diseño y desarrollo web, que además serán compatibles con la mayoría de navegadores web, iPad y dispositivos móviles. Por lo que puede resultar una alternativa interesante para todos aquellos interesados en el universo de HTML5, CSS y Javascript para el desarrollo de páginas web con efectos y animación.

www.spritely.net

Compartir

  • Eskup
  • Tuenti
  • Meneame
  • Bitacoras
  • iGoogle
  • My Yahoo
  • My Live

Escribe tu comentario