Banners animados: cómo realizar animaciones con CSS3
0. Índice de contenidos.
- 1. Introducción.
- 2. Entorno.
- 3. Los elementos gráficos.
- 4. Los estilos.
- 5. Resultado.
- 6. Referencias.
- 7. Conclusión.
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:
El primer elemento que vamos a animar es una mosca, para que se vaya moviendo por el cielo de nuestro fondo.
Unas serpentinas que caerán del cielo:
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.
Todos los elementos gráficos los disponemos en nuestro html dentro de un capa del siguiente modo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!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="http://www.adictosaltrabajo.com/wp-content/uploads/tutorial-data/BannerAnimadoCSS3/confeti1.png" alt="" width="300" height="180"></div> <div class="confetis f2"><img src="http://www.adictosaltrabajo.com/wp-content/uploads/tutorial-data/BannerAnimadoCSS3/confeti2.png" alt="" width="300" height="180" hspace="100"></div> <div class="confetis f3"><img src="http://www.adictosaltrabajo.com/wp-content/uploads/tutorial-data/BannerAnimadoCSS3/confeti3.png" alt="" width="300" height="180" hspace="200"></div> </div> <div id="mosca"><img src="http://www.adictosaltrabajo.com/wp-content/uploads/tutorial-data/BannerAnimadoCSS3/Mosca-adictos.png" alt="mosca" width="57" height="43"></div> <div id="mosca2"><img src="http://www.adictosaltrabajo.com/wp-content/uploads/tutorial-data/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="http://www.adictosaltrabajo.com/wp-content/uploads/tutorial-data/BannerAnimadoCSS3/brazo.png" alt="brazo" width="184" height="99"></div> <div id="situacion"><img src="http://www.adictosaltrabajo.com/wp-content/uploads/tutorial-data/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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
@-webkit-keyframes mosca { from { left: -200px; opacity: 1; } to { left: 700px; opacity: 1; } } @-webkit-keyframes mosca2 { from { left: 700px; opacity: 1; } to { left: -500px; opacity: 1; } } #mosca { position:relative; -webkit-animation-name: mosca; -webkit-animation-duration: 6s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: right; -webkit-animation-timing-function: ease-in; float: left; right: 60px; } #mosca2{ -webkit-animation-name: mosca2; -webkit-animation-duration: 8s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: left; -webkit-animation-timing-function: ease-in; float: right; position: relative; left: 60px; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
@-webkit-keyframes confetis{ from { top: -300px; opacity: 0; } to { top: 100px; opacity: 1; } } @-webkit-keyframes confeti{ 0% { -webkit-transform: rotate(0deg) translate(0px, 0px);} 100% { -webkit-transform: rotate(0deg) translate(0px, 0px);} } #confeti div { top: 110px; -webkit-animation-name: confeti, confetis; -webkit-animation-iteration-count: 2; -webkit-animation-direction: normal; -webkit-animation-timing-function: ease-in; } .confetis { position: absolute; } .confetis.f1 { -webkit-animation-duration: 5s; } .confetis.f2 { -webkit-animation-duration: 10s; } .confetis.f3 { -webkit-animation-duration: 7s; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
@-webkit-keyframes brazo { 0% { -webkit-transform: rotate(0deg) translate(0px,0px); } 100% { -webkit-transform: rotate(-20deg) translate(-15px,30px); } } #brazoizquierdo { position: relative; top:0px; left:0px; width:0px; -webkit-animation-name: brazo; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in; float: left; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@-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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
#container { width: 500px; height: 99px; background-image: url(fondoreb.png); /*background-image: url(../imagenes/fondo.png);*/ background-repeat: no-repeat; moz-box-shadow: 3px 3px 10px #000; -webkit-box-shadow: 3px 3px 10px #000; box-shadow: 3px 3px 10px #000; overflow: hidden; position: absolute; } #container:hover { width: 500px; height: 99px; background-image: url(fondo.png); /*background-image: url(../imagenes/fondo.png);*/ background-repeat: no-repeat; /*moz-box-shadow: 3px 3px 10px #000; -webkit-box-shadow: 3px 3px 10px #000; box-shadow: 3px 3px 10px #000;*/ overflow: hidden; position: absolute; } #containerprincipal { width: 500px; height: 99px; border: 2px solid #000; } #situacion { position: relative; float: left; } |
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.
anima a la selección
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
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 🙂