Crear un efecto tile de Windows Phone 7 con CSS3

Una de las características más llamativas de Windows Phone son los live tiles, las aplicaciones en la pantalla de inicio que tienen ciertas animaciones muy curiosas, permitiéndonos ver más información conforme de desplaza el tile. Los tiles tienen varios efectos, pero el que más me gusta es el del deslice para mostrar una foto o información.

La semana me decían que no había quedado muy entendido el uso de los @keyframes y animaciones con CSS3 y por eso haremos el efecto tile de Windows Phone 7 con CSS3 usando las animaciones, para mostrar una de las posibles aplicaciones a este tipo de propiedades animadas que nos proporciona CSS3, así que a continuación el tutorial completo.

Demo del tutorial Archivos del tutorial

La semana pasada vimos una introducción sobre el uso de animaciones en CSS3 con la ayuda de la propiedad o función @keyframes, la cual nos permite configurar animaciones de acuerdo a un porcentaje de carga de 0 a 100. Entonces, al parecer no se entendió muy bien su funcionamiento, y quizá fue culpa mía por no poner un ejemplo mucho más útil, por eso es este tutorial.

Lo que vamos a hacer hoy es un live tile, hay diferentes y las animaciones también son variadas, pero el que vamos a construir es el primero que sale en el video, el que tiene de título “Me”, se desliza hacía arriba y muestra una imagen, después de un tiempo vuelve a bajar.

HTML

Nuestra estructura inicial es un contenedor inicial, seguido por un sub-contenedor que tiene almacenado los dos cuadritos que vamos a hacer que se muestre cada cierto tiempo. Entonces vienen las dos capas, una con un  texto y la otra una descripción o un espacio en blanco, en caso de que queramos  usar una imagen. Para el tutorial use tres modelos como estos:

También hay que notar que lo importante aquí son las clases controlaremos todo, para poder separar cada elemento y hacerlo personalizable.

CSS

Lo más canijo empieza ahora. Primero vamos a definir la estructura básica de cualquier tile que queramos crear. Lo que tenemos es el estilo del contenedor principal, después el contenedor principal que engloban los tiles a mostrar. Use esta segunda capa para poder usar el overflow y así la estructura principal quede intacta.

Colores

Dentro de la capa con la clase tileC están dos capas, la primera la mostraremos al inicio y la segunda después. La capa con clase titulo tiene dos estilos más, el del color del tile y el del retraso, pero al ser la primera tile no le pondremos retraso. El retraso es para que la animación de los tiles no empiecen al mismo tiempo y de esa forma se vean muy uniformes, lo que queremos es que se vea un poco aleatorio.

Aquí están mis estilos para los colores, donde personalice el color de fondo y una imagen de fondo para el primer recuadro.

Texto

Para el texto usamos una fuente Segoe UI que es la fuente que usa el estilo Metro, para hacerla un poco más realista, y como el titulo de la primer escena está abajo con un line-height bajamos el texto para que quede bien alineado. La clase big nos sirve nada más para resaltar un texto, como el clima, por ejemplo, para que luzca más grande que el texto normal.

De igual forma así son los estilos extra, que son lo que se va a mostrar en el segundo recuadro

Animación

Ahora si, es momento de sacar la magia para poder configurar las animaciones. Como sabemos y aprendimos en nuestro pasado tutorial, necesitamos crear un nombre para nuestra animación. Como todos los tiles van a usar el mismo movimiento no requerimos hacer la animación N veces que necesitemos, basta con crear una y decirle a los tiles que esa vamos a usar. Para esto necesitamos las clases de inicial, retardo1 y retardo2

La clave de toda la animación es primero la duración de la animación, el número de veces que se tiene que repetir, y un retraso para que la animación no sea uniforme. En primer lugar la duración nos va a servir para configurar toda la acción de la misma animación; entre más duración más oportunidad de hacer más movimientos. Después tenemos el número de veces, para nosotros nos basta decirle que es infinito para que no se detengan. Y por último el retardo que como ya les dije hace que la animación no inicie de inmediato, que inicie N segundos después.

Entonces, ya que tenemos esto procedemos a realizar todas las animaciones. Para eso necesitamos el @keyframes con el nombre de nuestra animación. Una vez que ya definimos esto tenemos que usar porcentajes desde 0 a 100 para poder configurar lo que nosotros queramos. Como la animación la pusimos al primer recuadrito lo único que tenemos que decir es que mueva el margen superior para que muestre el siguiente recuadro, y conforma avanzamos en los porcentaje haremos que regrese para que cuando acabe la animación ya esté el tile en su estado natural, haciendo que tenga más duración así.

No olvidemos también configurar los @keyframes para webkit y mozilla, sino no funcionarán en los navegadores. Y bueno, ya terminando esto ya debería estar funcionando alguno de nuestros tres tiles que bien nos servirían para poder hacer un menú muy llamativo.

Entonces, este es un pequeño tutorial sobre una aplicación de las animaciones con CSS3, un poco más práctico y considero yo que muy poderoso el resultado con tan solo unas líneas de código porque incluso con jQuery tendríamos que hacer un par de cosas más.