Banners animados: Cómo realizar animaciones en CSS3

1
20612

Banners animados: cómo realizar animaciones con CSS3

0. Índice de contenidos.

1. Introducción

En este tutorial vamos a ver cómo podemos animar un dibujo con CSS3, lo que nos dará una idea global de las posibilidades de las animaciones haciendo
uso de la nueva versión de la especificación de hojas de estilo en cascada. La idea es la de tener un fondo fijo y añadir distintas imágenes en movimiento.

La idea es la de poder realizar un banner animado sin la necesidad de hacer uso de flash, sino directamente con HTML5 y CSS3.

El resultado final de la animación lo tienes al pie de este tutorial, pero ten en cuenta que solo funcionará si
tu navegador soporta HTML5.

2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Hp Pavilion dv7 Notebook PC (Intel Core 2 Duo a 2.26 GHz, 4 GB RAM, 450 GB HD).
  • Sistema operativo: Windows Home Premium.
  • Css3, Html5 y editor de fotos.

3. Los elementos gráficos.

Para su realización, lo primero que vamos a hacer es crear los elementos gráficos.

Unos fondos simples para nuestra animación podrían ser algo como esto:

fondo

fondo rebajado

El primer elemento que vamos a animar es una mosca, para que se vaya moviendo por el cielo de nuestro fondo.

mosca izquierdamosca derecha

Unas serpentinas que caerán del cielo:

hoja1

Un texto con el logotipo de adictos:

adictos al trabajo
anima a la selección

Y, por último, un muñeco saludando. Para ello hemos obtenido un dibujo con el tronco y brazo derecho del siguiente banner de adictos y después hemos recortado el brazo izquierdo por separado que es el que va a saludar.

troncomano izquierda

Todos los elementos gráficos los disponemos en nuestro html dentro de un capa del siguiente modo:

Cada imagen a animar la incluimos dentro de una capa, que será la que animaremos. Ejemplo: hay tantos #Div como serpentinas queremos que caigan, un #Div para el cuerpo, otro #Div para el brazo, etc….

4. Los estilos.

El objetivo es añadir los estilos necesarios que nos permitan realizar transiciones de los elementos graficos entre distintas posiciones en la pantalla.

Así para las moscas:

Definimos:

  • que la capa mosca se moverá de la posición -200px a 700px (de fuera del escenario hacia dentro), y luego la capa mosca2 se mueve de 700px a -200px
  • que duran 6 y 8 segundos respectivamente y repetido 2 veces.

Ahora vamos a animar el confeti que cae:

Como podéis ver aquí le decimos que el confeti vaya desde -300px (desde arriba) hasta 100px (fuera del #Div contenedor) y de transparente 0 a opaco 1.

Después hemos ido dando propiedades especificas a cada confeti.

La siguiente es la animación más compleja puesto que hay que cuadrar el brazo con el tronco y conseguir el movimiento adecuado:

Esto es lo que hace es que se mueva el brazo izquierdo y nos esté saludando, utilizando las propiedades ya vistas.

Por último el eslogan de adictos con sus propiedades css para darle formato y color y efectos css3:

Con esto terminamos nuestro código CSS para las animaciones y solo nos faltan par de estilos más:

Uno para las propiedades de la capa que contiene el fondo, la mosca y el confeti y su efecto :hover. Otro para la capa que contiene el muñeco animado y otro para la situacion del cuerpo del muñeco.

5. Resultado.

Ahora sólo nos queda ver nuestro ejemplo de banner funcionando.
Presiona F5 en Google Chrome, Ctrl+Shift+r en Safari o recarga la página, para ver la animación desde el principio.

mosca
mosca2
adictos al trabajo
anima a la selección

brazo
cuerpo

6. Referencias.

  • http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/
  • http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/
  • http://css-infos.net/properties/webkit.php
  • http://dev.sencha.com/deploy/css3-ads/

7. Conclusión.

Aplicado a la generación de banners, con la nueva versión del CSS3, su contenido será accesible e indexable. ¿Adios a los banners hechos en flash?.

Un saludo.

Chema

mailto:chmadi@gmail.com

1 Comentario

  1. Sobre la conclusión, si que parece que Flash está perdiendo terreno a medida que la web (CSS combinado con JS, DOM, Ajax…) va cogiendo fuerza en la parte gráfica e interactiva….

    Pero bueno, a ver que pasa. El banner te ha quedado chulísimo 🙂

Dejar respuesta

Please enter your comment!
Please enter your name here