Clicky

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

Categoría: Internet (Tutoriales y trucos)
Visitas: 9885
Firefox OS

Firefox OS va a cambiar la vida de las personas en los países en desarrollo

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