Pedir presupuesto

Spritely – Animación de imágenes con jQuery sin usar Flash

Flash está dando mucho que hablar por sus problemas con la seguridad, por la entrada de HTML5, y creo que cada vez más irá desapareciendo.

Ya han salido estadísticas en cuanto a las diferencias entre uno y otro como la que hizo Appleweblog.

Gráfico de  velocidad entre HTML5 y Flash

Debido a la falta de seguridad en flash y a la popularidad y uso de lenguajes como Ajax, salen a la luz proyectos muy logrados y sobre todo beneficiosos tanto para los desarrolladores como para los usuarios.

Spritely es un simple plugin jQuery que contiene únicamente 2 métodos: sprite() y pan().

Spritely - No flash no problem

Estos métodos se encargan simplemente de animar la propiedad css background-image de un elemento. En ambos casos puedes usar archivos de imagenes PNG o usar Gifs transparentes para IE6 que seguro te dará menos problemas.

Antes de explicar como usarlo, sería bueno que le echarais un vistazo a estos estupendos ejemplos:

Ejemplos de Spritely

Ejemplos de Spritely

Empieza a utilizar Spritely

Para usar este plugin lo primero que tenemos que hacer es Descargar Spritely.

Creamos las imagenes que serán los frames. En el ejemplo que podemos ver en la misma web, lo hacen con 3 imágenes de un pajaro que corresponderán a 3 frames

Imagenes de Spritely

Creamos un div llamado «bird» que le daremos el tamaño exacto al de la imagen (180×180 en este caso), y definimos los frames por segundo (‘fps’) y ‘no_of_frames’ que en nuestro ejemplo será 3:

[javascript]
$(‘#bird’).sprite({fps: 12, no_of_frames: 3});
[/javascript]

Ahora vamos a definir la atracción de las imágenes cuando haces clic con el ratón en la pantalla:

[javascript]
$(‘#bird’).sprite({fps: 12, no_of_frames: 3}).activeOnClick().active();
$(‘body’).flyToTap();
[/javascript]

Método Active(): Con este método el sprite comenzará cuando hagamos clic en él.

Método $('body').flyToTap(): Este método sirve para que cuando alejes el ratón de la imagen, ésta vuelva sóla a su ubicación. Después de unos segundos (en caso de que el método de movimiento aleatorio haya sido aplicado, se moverá de nuevo.

Para aplicar el sprite aleatorio, dentro de las limitaciones de pixels, usar el siguiente código:

[javascript]
$(‘#bird’)
.sprite({fps: 8, no_of_frames: 3}
.spRandom({
top: 70,
left: 100,
right: 200,
bottom: 340,
speed: 4000,
pause: 3000
});
[/javascript]

Animar el fondo

Si queires darle animación al fondo para que se vaya desplazando continuamente hacia la izquierda, debemos tener priemro una imagen a la que aplicarselo, en el ejemplo de la demo se ha usado la siguiente:

Fondo para Spritely

Una vez tenemos la imagen, debemos crear una capa div con un tamaño más chico que la imagen y usar css para aplicarle el fondo, asegurándonos de poner la imagen con repeat-x.

Lo conseguimos con el siguiente código:

[javascript]
$(‘#trees’).pan({fps: 30, speed: 2, dir: ‘left’});
[/javascript]

Puedes especificar la velocidad (speed, píxeles por frames). Y para poner una capa por encima de otra (el fondo por debajo de los pájaros) puedes ajustarlo con la propiedad ‘z-index’ de css.

A ver si poco a poco podemos desprendernos de Flash. Por ejemplo donde trabajo esta desactivado al igual que en el iphone tampoco se puede visualizar lo que este con Flash. ASi que ..

Viva HTML5 y los nuevos proyectos que no dependan de Flash!!!.

¿Te ha gustado?, Comparte!!

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en whatsapp
Compartir en email

4 comentarios

  1. Buenas… el efecto es buenisimo, solo una pregunta:
    ¿Qué se debe hacer para que la imagen entre desde la izquierda hasta un punto y se detenga sin que se repita una y otra vez? Gracias..

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es