Banners animados: Cómo realizar animaciones en CSS3

José María Masip Díaz

Técnico en artes gráficas, experto en preimpresión y webmaster.

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2011-02-21

Tutorial visitado 2.740 veces Descargar en PDF

Banners animados: cómo realizar animaciones con CSS3

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 izquierda mosca 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.

tronco mano izquierda

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dibujo animado CSS 3</title> 
<link rel="stylesheet" href="adictos.css" type="text/css"> 
</head>
<body> 	
<div class="rounded-corners" id="containerprincipal">
	<div class="rounded-corners" id="container">
		<div id="confeti" class="confeti">	
			<div class="confetis f1"><img src="BannerAnimadoCSS3/confeti1.png" alt="" width="300" height="180"></div> 
			<div class="confetis f2"><img src="BannerAnimadoCSS3/confeti2.png" alt="" width="300" height="180" hspace="100"></div>
			<div class="confetis f3"><img src="BannerAnimadoCSS3/confeti3.png" alt="" width="300" height="180" hspace="200"></div>
		</div> 
		<div id="mosca"><img src="BannerAnimadoCSS3/Mosca-adictos.png" alt="mosca" width="57" height="43"></div>
		<div id="mosca2"><img src="BannerAnimadoCSS3/Mosca-adictos2.png" alt="mosca2" width="57" height="43"></div>
		<div id="anim"><span class="rojo">ad</span><span class="amarillo">ict</span><span class="rojo">os</span> <span class="gris">al trabajo</span><br />anima a la selección</div>	
	</div>
    	<div id="brazoizquierdo"><img src="BannerAnimadoCSS3/brazo.png" alt="brazo" width="184" height="99"></div>
		<div id="situacion"><img src="BannerAnimadoCSS3/cuerpo.png" alt="cuerpo" width="184" height="99"></div>
</div>
</body>
</html>

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:

@-webkit-keyframes movimiento-diagonal { from { left: 130px; top: -50px; opacity: 1; } to { left: 130px; top: 30px; opacity: 0.5; } } #anim { text-shadow: rgba(255, 255, 255, .9) 0px 0px 5px; -webkit-animation-name: movimiento-diagonal; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: alternate; /*para que vuelva a su posicion inicial */ width: 300px; color: #FFF; position: relative; font-family: Arial, Helvetica, sans-serif; font-size: 25px; font-weight: bolder; text-align: center; left: 130px; top: 20px; background-color: rgba(255, 255, 255, .9) 0px 0px 5px; }

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.

adictos al trabajo
anima a la selección

6. Referencias.

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

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |

Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2011-02-24-10:49:32

Autor: jcarmonaloeches

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 :)

Catálogo de servicios Autentia

Síguenos a través de:

Últimas Noticias

Últimos Tutoriales

Últimos Tutoriales del Autor

Categorías del Tutorial

Últimas ofertas de empleo