Cómo crear una brillante animación del logo de Firefox OS con Sprited y jQuery

Modificado por última vez en Domingo, 11 Agosto 2013 00:43
(0 votos)

Animación del logo de Firefox OS

Mozilla y sus socios recientemente anunciaron formalmente Firefox OS en el Mobile World Congress y yo no podría estar más emocionado. Firefox OS va a cambiar la vida de las personas en los países en desarrollo (será un sistema operativo gratuito). El sitio web de los socios también puso en marcha una impresionante animación de Firefox OS y voy a escribir sobre cómo se ha creado.

Antes de entrar en el código, vamos a echar un vistazo a la imagen:

Animación del logo de Firefox OS

La imagen tiene la friolera de 7020x156 píxeles, un gran sprite. La puedes descargar desde aquí. Sólo se requiere un elemento HTML para la animación:

<div id="foxtail"></div>

Con el DIV en su lugar, podemos utilizar un poco de CSS básico para agregar una imagen de fondo y dimensiones:

#foxtail {
  background: url(foxtail.png) 0 0 no-repeat;
  width: 156px;
  height: 156px;
}

Pueden ser necesarias algunas propiedades de CSS del vendor-prefixed.

El último paso es actualizar periódicamente el background-position del DIV para proporcionar la apariencia de la animación a través del sprite. Para ello se puede usar un poco de jQuery y una utilidad de animación duende llamada spritely:

jQuery("#foxtail").sprite({ fps: 12, no_of_frames: 44, rewind: true });

La API de Spritely permite simples animaciones de sprites con el máximo control de la velocidad y la reproducción.


Para hacer la demo de este artículo he descargado la última versión de Spritely (la 0.6.1), es un archivo que se llama spritely-master.zip, una vez descomprimido navegamos dentro de la carpeta /spritely-master a /src/0.6.1/jquery.spritely-0.6.1.js y este último archivo lo subimos a nuestro servidor. En mi caso he creado un nuevo directorio dentro del /libraries de Joomla llamado /spritely y lo he subido allí.

También hace falta JQuery. Yo he utilizado la versión 1.6.3 minificada cuyo archivo se puede descargar desde jQuery 1.6.3. Una vez obtenido, se llama jquery-1.6.3.min.js, lo subimos a la misma carpeta que el de Spritely.

La imagen foxtail.png deberéis también subirla a alguna carpeta de vuestro servidor y llamarla desde la hoja de estilo CSS del archivo HTML.

Este es el código completo:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr">
<head>
<style>
        .background {
            height: 373px;
            width: 244px;
            background: url(http://mozorg.cdn.mozilla.net/media/img/firefox/partners/screen-overview.jpg) 0 0 no-repeat;
            position: relative;
        }
        #foxtail {
            background: url(/images/ampliadas/foxtail.png) 0 0 no-repeat;
            width: 156px;
            height: 156px;

            top: 90px;
            left: 30px;
            position: absolute;
        }
</style>
</head>
<body>
<div class="background">
        <div id="foxtail"></div>
</div>
    <script src="/libraries/spritely/jquery-1.6.3.min.js"></script>
    <script src="/libraries/spritely/jquery.spritely-0.6.1.js"></script>
    <script>
        jQuery(document).ready(function() {
            jQuery("#foxtail").sprite({ fps: 12, no_of_frames: 44, rewind: true });
        });
    </script>
</body>
</html>

El artículo original, "Create a Brilliant Sprited, jQuery-Powered Firefox Animation" es de David Walsh


Comentarios (0)

No hay comentarios escritos aquí

Deja tus comentarios

  1. Publicar comentario como invitado. Regístrate o ingresaa tu cuenta
Archivos adjuntos (0 / 3)
Compartir su ubicación
close

Recibe gratis nuestros nuevos artículos!

Serás el primero en conocer las novedades y noticias que pasan en Internet, nuestros tutoriales, trucos y más.

Escribe tu email:

Se abrirá una nueva ventana deFeedBurner a la izquierda de la página y habrás de validar un Captcha.

Lee nuestras Política de privacidad & Política de cookies
Puedes darte de baja de la lista de correo electrónico en cualquier momento